In this article we will see how to open and collapse a control on mouse click.
Let us first see the design of the page.
First I place a stack panel and three canvas inside the panel.
The code for single canvas is shown below:
<StackPanel x:Name="sp1" Margin="55,70,268,32">
<Canvas x:Name="canvas1" Height="30" Margin="0" MouseLeftButtonDown="canvas1_click" Cursor="Hand">
<Border x:Name="border1" Height="29" Width="317" Canvas.Top="1" BorderBrush="Black" BorderThickness="1"/>
<Border x:Name="border1_Copy" Height="29" Width="317" Canvas.Top="1" BorderBrush="Black" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF06D9EC" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<TextBlock Height="21" Width="155" Canvas.Top="7" Text="Latest Articles" TextWrapping="Wrap" Canvas.Left="5" FontWeight="Bold" FontSize="13.333"/>
</Canvas>
</StackPanel>
The output after defining three canvas is as follows:
Now we are going define a button as follows:
<Button x:Name="button1down" Height="25" HorizontalAlignment="Right" Width="35" Content="^" Click="button1down_click" Template="{StaticResource ButtonControlTemplate1}" Canvas.Left="282" Canvas.Top="3" Cursor="Hand"/> <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button"> <Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Stroke="#FF6DBDD1" StrokeThickness="1" Margin="3,0,5,0" Fill="#FF594646"/>
<Path Fill="#FFFCF108" Stretch="Fill" Stroke="#FFFAE406" StrokeThickness="3" Margin="10,5,10.5,5" UseLayoutRounding="False" Data="M-167.46146,267.18875 L-159.22812,279.89929"/>
<Path Fill="#FFFCF108" Stretch="Fill" Stroke="#FFFAE406" StrokeThickness="3" Margin="9.5,5,11,5" UseLayoutRounding="False" Data="M100.56663,-42.002625 L92.622185,-27.328712"/>
</Grid>
</ControlTemplate>
The final output after designing the page is as follows:
Now we will work on the functionality part.
I have defined three boolean values for checking whether the canvas is open or collapsed.
Boolean iscanvas1open=false;
Boolean iscanvas2open=false;
Boolean iscanvas3open=false;
Now on canvas click we are opening and closing the canvas.
private void canvas1_click(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
if (iscanvas1open==false)
{
th.Bottom=63;
canvas1.Margin=th;
canvas1.Height = 100;
border1.Height=160;
iscanvas1open=true;
}
else
{
th.Bottom = 0;
canvas1.Margin = th;
canvas1.Height = 30;
border1.Height=29;
iscanvas1open=false;
}
}
Here th is the thickness defined as:
Thickness th = new Thickness();
In the button click we have this code:
private void button1down_click(object sender, System.Windows.RoutedEventArgs e)
{
canvas1.Visibility=Visibility.Collapsed;
}
Output:
The first output has two sections opened as shown below:
The second output is when we close one of the section from the above shown output.
When we click the cross button of the "Latest Blogs" section it will close as shown below:
This can be used to show contents in the opened section. Also user can close the section which he doesn't need.