Idea was to have one rectangle and on button click do hide / show that rectangle. Easiest way is with BooleanToVisibilityConverter.
XAML looks like this:
<Window x:Class="BooleanToVisibilityConverterExample.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:viewModel="clr-namespace:BooleanToVisibilityConverterExample.ViewModel" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.Resources> <viewModel:BooleanToVisibilityConverterExampleViewModel x:Key="BooleanToVisibilityConverterExampleViewModel" /> <BooleanToVisibilityConverter x:Key="BoolToVis" /> </Grid.Resources> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Button DataContext="{StaticResource BooleanToVisibilityConverterExampleViewModel}" Command="{Binding OnClick}" Grid.Row="1" Content="Click Me!" VerticalContentAlignment="Bottom"/> <Rectangle x:Name="greenLine" Height="25" Width="25" DataContext="{StaticResource BooleanToVisibilityConverterExampleViewModel}" Visibility="{Binding MyHidden, Converter={StaticResource BoolToVis}, UpdateSourceTrigger=PropertyChanged}" Fill="Green"/> </Grid> </Window>
Note how I declared resource:
<BooleanToVisibilityConverter x:Key="BoolToVis" />
After that in rectangle declaration note:
Visibility="{Binding MyHidden, Converter={StaticResource BoolToVis}, UpdateSourceTrigger=PropertyChanged}"
There is no too much philosophy about code itself, basically everything is happening here:
MyHidden = !MyHidden;
OnPropertyChanged("MyHidden");
Property changed I explained here.
Example you can download from here.
There is also another solution, which I will not explain, since it is a bit more complicated, you have to implement IValueConverter, example for that version you can download from here, and to write that example I was this web site.