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.