While adding a bunch of content to the Border class documentation, I discovered many questions about using borders. I'm going to attempt to address one issue which is how make a border appear and disappear. Before I get into it, if you are interested in the basics of using borders, this is a nice post. Also, Dave Relyea has a good post on how layout works and goes into some detail on using Border.
Here's my scenario: I want to have a border appear and disappear around an object when I click on it.
When I started trying to do this, the first thing I tried was setting Opacity=0 on the Border. This did not work as expected and instead made my Border and everything inside it disappear. After I got over being annoyed that the obvious solution wasn't going to work, I realized that this is because border is actually a container. If you set the Background on your border, you'll notice that it fills the entire rectangle that the border edges.
For similar reasons, setting Visibility=Collapsed also didn't have the desired effect. In fact, it was much worse (at least for what I wanted) because the space for my TextBlock and border also disappeared. (You would only notice this if you had other elements on the page, which I did at the time I tried this.)
Finally, I got wise and decided that I needed to make the BorderBrush property invisible. And I realized I could do this by setting the opacity of the brush. So, here is the code (and I looked up how to do this in XAML by reading our documentation! Thanks to Wolf, our XAML guru.):
<UserControl x:Class="BorderBlog.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid x:Name="LayoutRoot" >
<Border x:Name="TextBorder" BorderThickness="10" >
<Border.BorderBrush>
<SolidColorBrush Color="Red" Opacity="0" />
</Border.BorderBrush>
<TextBlock
MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"
Text="Hello" />
</Border>
</Grid>
</UserControl>
public partial class Page : UserControl
{
public Page()
InitializeComponent();
}
private void TextBlock_MouseLeftButtonDown(object sender,
MouseButtonEventArgs e)
TextBorder.BorderBrush.Opacity = 1;
This does work, but the border is stretched (by default) to fill the entire layout area given to it by its parent which isn't really what I wanted. So I had to go ahead and set the alignment properties on the border.
<Border x:Name="TextBorder" BorderThickness="10" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock MouseLeftButtonDown="TextBlock_MouseLeftButtonDown" Text="Hello" />
Margaret