I have simple WPF layout task and looking to avoid code-behind if possible.
I have two panels left and right. When I am colapsing left panel - right panel gets stretched ... this is my xaml:
<Grid Name="gridContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Grid.Column="0" Name="leftPanel" >
<TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/>
<StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label>
<Button Click="LeftButton_Click" Margin="10">Close Left Panel</Button>
</StackPanel>
</Grid>
This is code-behind:
private void LeftButton_Click(object sender, RoutedEventArgs e)
{
if(leftPanel.Visibility == System.Windows.Visibility.Visible)
{
gridContainer.ColumnDefinitions[0].Width = GridLength.Auto;
leftPanel.Visibility = System.Windows.Visibility.Collapsed;
leftSplitter.Visibility = System.Windows.Visibility.Collapsed;
}
else
{
gridContainer.ColumnDefinitions[0].Width = GridLength.Auto;
leftPanel.Visibility = System.Windows.Visibility.Visible;
leftSplitter.Visibility = System.Windows.Visibility.Visible;
}
}
I am wondering, are there any way to avoid the code behind here? and acomplish this task in XAML only?
Thanks for advice
shreesh chandra shukla
17-Aug-2013You can do it like this without code-behind.
First we need to set up a specific styling that will allow us to toggle the visibility for the StackPanel.
<Window.Resources>
<Style x:Key="panelStyle" TargetType="{x:Type StackPanel}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="StackPanel.Visibility" Value="Collapsed" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=Tag.IsChecked, RelativeSource={RelativeSource Self}}" Value="False">
<Setter Property="StackPanel.Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
Next we do some minor modifications in your original code.
Add the styling and bind the Tag of the StackPanel to the Button.
<StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" >
Change the Button to a ToggleButton and assign it a name.
<ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton>
It should look something like this ones you are done.
<Grid Name="gridContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="5"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="Aqua" Style="{StaticResource panelStyle}" Tag="{Binding ElementName=myButton}" Grid.Column="0" Name="leftPanel" >
<TextBlock FontSize="35" Foreground="#58290A" TextWrapping="Wrap">Left Hand Side</TextBlock>
</StackPanel>
<GridSplitter Name="leftSplitter" Grid.Column="1" HorizontalAlignment="Stretch"/>
<StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Label Content="... Clien Area .. Has to Stretch vertically and horizontally" Margin="10"></Label>
<ToggleButton Name="myButton" Margin="10">Close Left Panel</ToggleButton>
</StackPanel>
</Grid>