I would like to style my textboxes to display like just an underlined area.
Similar to image below...
How would I accomplish this?
Set on every textbox (or with a general style..):
BorderBrush="Black" BorderThickness="0,0,0,1" Background="Transparent"
Just put a border on the bottom
<TextBox BorderBrush="Black" BorderThickness="0,0,0,2"
HorizontalAlignment="Stretch" Height="40" />
Related
I want my to have a sunken border like a textbox. How to do this? Is there a way to get the controltemplate to mimc the parent border?
There is no theme for you to use, but you can work around like this:
Using this MSDN model (http://i.msdn.microsoft.com/dynimg/IC84967.gif):
Here's my recommendation: (sunken inner)
Just change the height/width of the outside border and you use this block of XAML like a TextBox. Reverse the two border tags if you want an outder border instead. Should be easy for you.
<Border Width="100" Height="200"
BorderBrush="Gainsboro" BorderThickness="0,0,5,5">
<Border BorderBrush="Gray" BorderThickness="5,5,0,0">
<TextBox Text="Hello World"
BorderThickness="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Border>
</Border>
Special thanks to: Style a border with a different brush color for each corner
Should look like this:
You can try something like this
<Border Margin="20" BorderThickness="0.5" BorderBrush="Gray">
<Border BorderThickness="1,1,0,0" BorderBrush="DarkGray">
<ContentPresenter />
</Border>
</Border>
You might need to play with the colours though.
How to use VerticalAlignment="Stretch" with a Label inside a Canvas? I'm trying to center the text "Cancel" in the button as in the code below. To use fixed height and width for the label isn't a desired option.
<Button Name="buttonCancel" Width="80" Height="40" IsCancel="True" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Canvas>
<Label Canvas.Top="0" Canvas.Left="0" Padding="0" FontSize="10">Esc</Label>
<Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">Cancel</Label>
</Canvas>
</Button>
Use a binding to the Canvas's ActualWidth:
<Canvas>
<Label Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Canvas}}, Path=ActualWidth}">...</Label>
</Canvas>
But as mentioned above, if you are interested in dynamic stretching layouts, the Canvas is not the ideal choice of control.
A Canvas does not perform any scaling layout of its contents; if you want to scale the contents, you could use Grid in this case, which will, by default, scale both Label elements to fill the Content space.
Assuming you need the canvas for other objects that are of a fixed nature, you could overlay the Canvas on a Grid, and then put the labels in the grid. You can put the labels before the canvas to make them background z-index (overwritten by canvas objects) or after the canvas to make them higher z-index (will overwrite canvas objects). For example:
<Button Name="buttonCancel" Width="80" Height="40" IsCancel="True" Padding="0" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<Grid>
<Label Padding="0" FontSize="10">Esc</Label>
<Label VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">Cancel</Label>
<Canvas>
<!-- Your Canvas content here -->
</Canvas>
</Grid>
</Button>
Repeating my solution from the comments, since (a) you really don't want a Canvas and (b) it sounds like this solved your problems, so I'll make it an answer where it will be more visible to others.
Canvas is meant for fixed-pixel-size layouts, which is probably the least common case. You should replace your Canvas with a Grid as shown below, so that both Labels are laid out dynamically (and independently) within the available space:
<Grid>
<Label Padding="0" FontSize="10">Esc</Label>
<Label VerticalAlignment="Center" HorizontalAlignment="Center">Cancel</Label>
</Grid>
is it possible that if i put a textbox in border container and will not specify height & width of textbox rather specify height & width for border and textbox will take the size of the border. how could i do this. i tried to do it in xaml but fail. need answer. thanks
http://msdn.microsoft.com/en-us/library/system.windows.horizontalalignment.stretch.aspx
It's nice and easy:
<Border Width="200" Height="70" BorderBrush="Black" BorderThickness="2">
<TextBox></TextBox>
</Border>
<Grid>
<Border Width="100" Height="100">
<TextBox />
</Border>
</Grid>
The text box will be of size of the border.
I am kinda new to WPF, dont know if the question is weird. I wanted to know if its possible to add a border around the text inside a textBlock.
EDIT:
As per suggestion I have tried both but without much success:
<Border BorderBrush="#FF0B232F" BorderThickness="2">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
and
<Label BorderBrush="#FF0B232F" BorderThickness="2,2,2,2" Content="TextBlock" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" />
Am I doing something wrong here?
In such cases I use Label or TextBlock placed in Border.
Both your approaches are correct, however, if you have the textblock/label inside a grid (or any other container) declared as you have, its contents will stretch.
Try setting the VerticalAlignment and/or HorizontalAlignment to an appropriate setting (Top/Left, Center)..
something like this:
<Border BorderBrush="#FF0B232F" BorderThickness="2" VerticalAlignment="Top">
<TextBlock HorizontalAlignment="Left" Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black"/>
</Border>
Assuming that you are asking for a full size TextBlock with a border overlay within the bounds of the TextBlock you could wrap it in a Grid and draw the borders over the top of the TextBlock like this...
<Grid HorizontalAlignment="Left">
<TextBlock Text="TextBlock" TextWrapping="Wrap" FontSize="36" FontWeight="Bold" Foreground="#FF88BCCD" OpacityMask="Black" />
<Border BorderBrush="#FF0B232F" BorderThickness="2" />
</Grid>
Because we haven't specified the grid row and column on the TextBlock and Border objects the border overlays on top of the TextBlock.
if you just want to have a border around your textblock or any other control use :
<Border>
<TextBlock></TextBlock>
</Border>
you set border properties like color ,cornerradius ,thickness,...
I have a StackPanel containing five images and I want to put a black border around each image.
The XAML I have at the moment is:
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top" />
I thought I would be just able to put a one-unit margin or padding on the image and set a background color to 000000 but Padding and Background are both invalid for images.
What is an easy way to do this in XAML? Do I really have to put each image inside another control to get a border around it or is there some other trickery I can use?
Simply wrap the Image in a Border control
<Border BorderThickness="1">
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top" />
</Border>
You could also provide a style you apply to images that does this if you don't want to do it around every image
Final solution from answer and comments added by Pax:
<Border BorderThickness="1"
BorderBrush="#FF000000"
VerticalAlignment="Top">
<Image Name="imgPic1"
Width="100"
Height="75"
Stretch="Fill"
VerticalAlignment="Top"/>
</Border>
The accepted answer will not work because of the problem described here
https://wpf.2000things.com/2011/04/17/279-adding-a-border-around-an-image-control/
I solved it this way.
<Viewbox>
<Border BorderThickness="3" BorderBrush="Red">
<Image Stretch="None" ></Image>
</Border>
</Viewbox>
I just stumbled upon this post and the other answer did not work right. Maybe because I now use framework 4 and this post is old?
In any case - if someone will see this by chance in the future - here is my answer:
<Border Name="brdSiteLogo"
BorderThickness="2"
BorderBrush="#FF000000"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="12,112,0,0"
Height="128"
Width="128">
<Image Name="imgSiteLogo"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"/>
</Border>
The border thickness and brush are important (if you wont choose a color - you will not see the border!!!)
Also, the border should be aligned on your window. The image is "inside" the border, so you can use margins or just stretch it like I did.