WPF Toggles Panel Visibility

Question

I have two panels, only one should be visible at a time. I switch between them by pressing a button, one on each panel.

Is there a good way to do this in xaml without codebehind or viewmodel?

Answer 1

The suggestion using tabcontrol is a good one. I found some code that style TabControl to display TabItem content

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Grid> <TabControl BorderThickness="0" Padding="0"> <TabControl.Resources> <Style TargetType="TabItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="TabItem"> </ControlTemplate> </Setter.Value> </Setter> </Style> </TabControl.Resources> <TabItem Header="Not shown"> <Grid Background="Red"/> </TabItem> <TabItem> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Tab 2 </TextBlock> </TabItem> </TabControl> </Grid> </P 

Answer 2

It is indeed possible, but rather difficult.

My example works without code-code, practically without any value converters.

Here is the code: (now a simplified version, thanks @HB for ideas)

 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <Style x:Key="RBToggleButtonStyle" TargetType="RadioButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" /> </ControlTemplate> </Setter.Value> </Setter> <Setter Property="Width" Value="150"/> <Setter Property="Height" Value="25"/> <Setter Property="HorizontalAlignment" Value="Right"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="Margin" Value="15"/> <Setter Property="Content" Value="Hide"/> </Style> <Style x:Key="MyBorderStyle" TargetType="Border"> <Style.Triggers> <DataTrigger Binding="{Binding IsChecked}" Value="True"> <Setter Property="Visibility" Value="Hidden"/> </DataTrigger> </Style.Triggers> </Style> </Page.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Border Background="Green" Grid.Column="0" Style="{StaticResource MyBorderStyle}" DataContext="{Binding ElementName=greenB}"> <RadioButton x:Name="greenB" GroupName="x" Style="{StaticResource RBToggleButtonStyle}"/> </Border> <Border Background="Red" Grid.Column="1" Style="{StaticResource MyBorderStyle}" DataContext="{Binding ElementName=redB}"> <RadioButton x:Name="redB" GroupName="x" Style="{StaticResource RBToggleButtonStyle}"/> </Border> </Grid> </Page> 

The idea of ​​using ToggleButtons stolen from another question in SO

Answer 3

If you use ToggleButtons, you can bind Panel 1 visibility to the IsChecked Button 2 state and Panel 2 visibility in the IsChecked button 1 state. Make them TwoWay bindings and use the built-in BooleanToVisibility converter.

Answer 4

Why not use TabControl for this?

Answer 5

A little work with IValueConverter should do the trick. Of course, this is not a plain old XAML, but it is not in code and can be reused.

I see something like binding visibility X to visibility Y and add a converter to it:

 public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { return (Visibility)value == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible; } 

Answer 6

I do not think so. You will need to use viewmodel or codebehind. Use a style with a DataTrigger and bind the value of the visibility property to the property in the viewmodel, avoiding the use of codebehind.