Show/Hide a Border and other Border fun
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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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">
<Border.BorderBrush>
<SolidColorBrush Color="Red" Opacity="0" />
</Border.BorderBrush>
<TextBlock MouseLeftButtonDown="TextBlock_MouseLeftButtonDown" Text="Hello" />
</Border>
This now looks as expected. One related recurring theme that I've seen come up is how to remove the border from controls. This is a slightly different issue since they are hard coded into the templates. In this case, you will need to modify the control template to remove the border. This post goes into detail on removing the border from DataGrid, but you could follow the same steps for any of the controls. And, as always, you can look in the documentation for related info on layout containers, fun with controls, control templates and the Border class.
Margaret