Search code examples
.netwpfxamldatatrigger

Having one data trigger for multiple controls


I want to have one Style DataTrigger inside my window.resources that can be used for multiple expanders. The DataTrigger is bound to an enum value inside my ViewModel, and based on the enum value, I want the the correct expanders to be collapsed. For example: If the enum value is set to "A" then I want only the expander associated with type "A" to be visible, and the rest of the expanders to become collapsed.

I was thinking of something like this:

    <Style TargetType="{x:Type Expander}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Type}" Value="A">
                // In here i would set the expander associated w/ "A" to Visible 
                // and have the rest of the expanders collapsed. Since TargetName is 
                // not allowed within a "Setter" property of a style, I am not sure on how to accomplish this.
            </DataTrigger>
            <DataTrigger Binding="{Binding Type}" Value="B">
               // Same concept as above
            </DataTrigger>
        </Style.Triggers>
    </Style>

Solution

  • I was able to solve this (using multiple triggers) with a static resource that caused each Control to 'Collapse' and then having separate 'DataTriggers' inside each Control where the associated enum value causes the visibility to be 'Visible'.

    See below (I used canvas in this example):

       <Grid>
        <Grid.Resources>          
            <Style x:Key="CanvasStyle">
                <Setter Property="Canvas.Visibility" Value="Collapsed"/>
            </Style>
        </Grid.Resources>
        <ComboBox IsSynchronizedWithCurrentItem="True" Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" Name="comboBox1" VerticalAlignment="Top" Width="153" ItemsSource="{Binding IDs}" MaxDropDownHeight="75" SelectedValue="{Binding SelectedValue}"/>
        <StackPanel Height="128" HorizontalAlignment="Left" Orientation="Horizontal">
            <Canvas Height="100" Name="canvas1" Width="100" Background="#FFC70D0D">
                <Canvas.Style>
                    <Style BasedOn="{StaticResource CanvasStyle}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Type}" Value="A">
                                <Setter Property="Canvas.Visibility" Value="Visible" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Canvas.Style>
            </Canvas>
            <Canvas Background="#FF63C70D" Height="100" Name="canvas2" Width="100">
                <Canvas.Style>
                    <Style BasedOn="{StaticResource CanvasStyle}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Type}" Value="B">
                                <Setter Property="Canvas.Visibility" Value="Visible" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Canvas.Style>
            </Canvas>
            <Canvas Background="#FF0D55C7" Height="100" Name="canvas3" Width="100">
                <Canvas.Style>
                    <Style BasedOn="{StaticResource CanvasStyle}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Type}" Value="C">
                                <Setter Property="Canvas.Visibility" Value="Visible" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Canvas.Style>
            </Canvas>
        </StackPanel>
    </Grid>