WPF toggle panel visibility

Question

I have two panels, only one should be visible at the same time. I change between them by clicking a button, one on each panel.

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

The button on panel X should make the panel X *in*visible, right? — Vlad, Jun 08 '11 at 12:36

score 3 · Answer 1 · edited May 23 '17 at 12:15

It's actually possible, however quite tricky.

My example works without any code-behind, actually without any value converters, too.

Here is the code: (now simplified version, thanks to @H.B. 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 is stolen from some other question at SO

@H.B.: you cannot make the style for the toggle button common: the data trigger is bound each time to the opposite button (greenB and redB respectively) — Vlad, Jun 08 '11 at 16:37
Oh snap, move the triggers into an individual style, and base it on the control-template only style. — H.B., Jun 08 '11 at 16:44
@H.B.: just added the corrected version: parametrized with DataContext — Vlad, Jun 08 '11 at 16:47
@Vlad: I meant my version (which i tested before i commited the edit). — H.B., Jun 08 '11 at 16:48
@H.B.: Actually, the triggers are not needed, since we are using ToggleButtons. I'll remove them completely. — Vlad, Jun 08 '11 at 16:48

score 2 · Accepted Answer · answered Jun 15 '11 at 10:59

The suggestion with using a tabcontrol is good. I found some code which styles a TabControl to only show the 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

score 1 · Answer 3 · answered Jun 08 '11 at 13:28

1

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

answered Jun 08 '11 at 13:28

Ross

4,460
2
32
59

It's always been built-in. WPF was introduced in .NET 3.0 and so was BooleanToVisibilityConverter. http://msdn.microsoft.com/en-us/library/system.windows.controls.booleantovisibilityconverter%28v=VS.85%29.aspx – Joe White Jun 08 '11 at 17:29

score 1 · Answer 4 · answered Jun 08 '11 at 14:35

1

Why not use the TabControl for this?

answered Jun 08 '11 at 14:35

Viv

2,515
2
22
26

Nice suggestion, but not useful for this case – Karsten Jun 09 '11 at 07:57
Or perhaps using a TabControl could be useful. Is it possible to move the tab button outside the header? – Karsten Jun 09 '11 at 11:00

score 0 · Answer 5 · answered Jun 08 '11 at 13:29

A little work around with a IValueConverter should do the trick. Sure it's not plain old XAML, but it's not in the codebehind and can be reuse.

I see something like binding X visibility to Y visibility 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;
}

score -1 · Answer 6 · answered Jun 08 '11 at 12:47

-1

I don't think so. You would need to use viewmodel or codebehind. Use a Style with a DataTrigger and bind the value of the visibility property to a property in viewmodel, avoiding the use of codebehind.

answered Jun 08 '11 at 12:47

Hasan Fahim

3,875
1
30
51

1

You are underestimating XAML. – H.B. Jun 08 '11 at 15:24

WPF toggle panel visibility

6 Answers6