CODEWITHSUNDEEP
c#wpfxamldata-bindingwpf-controls
Tom Han
Tom Han

Reputation: 59

MultiTrigger Condition to same binding/ Switch controls using Trigger

I am trying to have p:MarqueeTextBlock to only scroll on ListBox IsSelected under TargetType="{x:Type ListBoxItem}".

Having trouble to work out adding a MultiTrigger conditions (fired when IsSelected becomes True or False) to change the Property="Scroll" of the p:MarqueeTextBlock to Off or LeftTypewriter. In addition not sure how to reference the p:MarqueeTextBlock in the DataTemplate; perhaps if I provide it an x:Name? However I get Template property has already been set on DataTemplate.

I need to add AOTbMain_MARQUEE somehow in x:Key="ListBoxStyle_GAME" like:

<p:MarqueeTextBlock Text="{Binding Path=Title}" Style="{StaticResource AOTbMain_MARQUEE}"/>

Code with above reference not added:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:p="clr-namespace:Plugin.Controls;assembly=Plugin.v1"
    mc:Ignorable="d"
    d:DesignHeight="2160" d:DesignWidth="3840">

    <UserControl.Resources>
        <ResourceDictionary>
            <Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Grid>
                                <Image x:Name="SelectedGameOverlay" Source="{}pack://siteoforigin:,,,/Images/Selected Game Overlay.png" RenderOptions.BitmapScalingMode="HighQuality" Visibility="Hidden" />
                                <ContentPresenter x:Name="SelectedGameTextColour" HorizontalAlignment="Left" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="Selector.IsSelectionActive" Value="False" />
                                        <Condition Property="IsSelected" Value="True" />
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Opacity" Value="1" />
                                    <Setter TargetName="SelectedGameOverlay" Property="Visibility" Value="Visible" />
                                    <Setter TargetName="SelectedGameTextColour" Property="TextElement.Foreground" Value="#FFFFFF" />
                                </MultiTrigger>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="Selector.IsSelectionActive" Value="True" />
                                        <Condition Property="IsSelected" Value="True" />
                                    </MultiTrigger.Conditions>
                                    <Setter Property="Opacity" Value="1" />
                                    <Setter TargetName="SelectedGameOverlay" Property="Visibility" Value="Visible" />
                                    <Setter TargetName="SelectedGameTextColour" Property="TextElement.Foreground" Value="#FFFFFF" />
                                </MultiTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ListBoxStyle" TargetType="p:AutoscrollListBox">
                <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle}" />
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderThickness" Value="0" />
            </Style>

            <Style x:Key="ListBoxStyle_BASE" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyle}">
                <Setter Property="ScrollMode" Value="Center" />
                <Setter Property="ItemContainerStyle">
                    <Setter.Value>
                        <Style TargetType="ListBoxItem" BasedOn="{StaticResource ListBoxItemStyle}">
                            <Setter Property="Padding" Value="1" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="AOTbMain_MARQUEE" TargetType="p:MarqueeTextBlock">
                <Setter Property="Scroll" Value="LeftTypewriter" />
                <Setter Property="ScrollDelayBeg" Value="0:0:5" />
                <Setter Property="ScrollDelayEnd" Value="0:0:3" />
                <Setter Property="ScrollSpeed" Value="0:0:5" />
            </Style>

            <Style x:Key="ListBoxStyle_BASE_INDXFADER" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyle_BASE}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IndexVisibility}" Value="Visible">
                        <Setter Property="Opacity" Value="0.1" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IndexVisibility}" Value="Hidden">
                        <Setter Property="Opacity" Value="1" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="ListBoxStyle_BASETB" TargetType="p:AutoscaleTextBlock">
                <Setter Property="TextTrimming" Value="CharacterEllipsis" />
                <Setter Property="TargetFontSize" Value="30" />
            </Style>

            <Style x:Key="ListBoxStyle_GAME" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyle_BASE_INDXFADER}">
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <p:AutoscaleTextBlock Text="{Binding Path=Title}" Style="{StaticResource ListBoxStyle_BASETB}" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ListBoxItemStyleSearch" TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Grid>
                                <ContentPresenter x:Name="SelectedSearchTextColour" />
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True" />
                                    <Setter Property="Opacity" Value="1" />
                                    <Setter TargetName="SelectedSearchTextColour" Property="TextElement.Foreground" Value="#FFFFFF" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="ListBoxStyleSearch" TargetType="p:AutoscrollListBox">
                <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyleSearch}" />
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Setter Property="Background" Value="Transparent" />
            </Style>

            <Style x:Key="ListBoxStyle_INDX" TargetType="p:AutoscrollListBox" BasedOn="{StaticResource ListBoxStyleSearch}">
                <Setter Property="ItemContainerStyle">
                    <Setter.Value>
                        <Style TargetType="ListBoxItem" BasedOn="{StaticResource ListBoxItemStyleSearch}">
                            <Setter Property="Padding" Value="1" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid>
        <Viewbox HorizontalAlignment="Left">
            <p:AutoscrollListBox Name="Index" Style="{StaticResource ListBoxStyle_INDX}" Visibility="{Binding IndexVisibility}" />
        </Viewbox>

        <p:AutoscrollListBox Name="Items" Style="{StaticResource ListBoxStyle_GAME}" />
    </Grid>
</UserControl>

Upvotes: 1

Views: 422

Answers (1)

BionicCode
BionicCode

Reputation: 28948

The following Style will show the AutoscrollListBox as content of the DataTemplate. Once the ListBoxItem is selected it will display the MarqueeTextBlock instead. If unselected it will switch back to the AutoscrollListBox.

Solution 1

<Grid>
  <AutoscrollListBox Name="Items" >
    <AutoscrollListBox.ItemTemplate>
      <DataTemplate>
        <DataTemplate.Resources>
          <AutoscaleTextBlock x:Key="AutoscaleTextBlock" 
                              Text="{Binding Title}" 
                              Style="{StaticResource ListBoxStyle_BASETB}"
                              x:Shared="False" />
          <MarqueeTextBlock x:Key="MarqueeTextBlock"
                            Text="{Binding Title}"                           
                            Style="{StaticResource AOTbMain_MARQUEE}"
                            x:Shared="False" />
        </DataTemplate.Resources>

        <ContentControl x:Name="ContentPresenter" />

        <DataTemplate.Triggers>
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}" 
                       Value="False">
            <Setter TargetName="ContentPresenter" 
                    Property="Content" 
                    Value="{StaticResource AutoscaleTextBlock}"/>
          </DataTrigger>
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}" 
                       Value="True">
            <Setter TargetName="ContentPresenter" 
                    Property="Content" 
                    Value="{StaticResource MarqueeTextBlock}"/>
          </DataTrigger>
        </DataTemplate.Triggers>
      </DataTemplate>
    </AutoscrollListBox.ItemTemplate>
  </AutoscrollListBox>
</Grid>

Solution 2
In case you are working with nested resource dictionaries and can't apply the x:Shared attribute you can swap the controls directly from the Trigger:

<Grid>
  <AutoscrollListBox Name="Items" >
    <AutoscrollListBox.ItemTemplate>
      <DataTemplate>
        <ContentControl x:Name="ContentPresenter" />

        <DataTemplate.Triggers>
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}" 
                       Value="False">
            <Setter TargetName="ContentPresenter" 
                    Property="Content">
              <Setter.Value>
                <AutoscaleTextBlock Text="{Binding Title}"                           
                                    Style="{StaticResource AOTbMain_MARQUEE}" />
               </Setter.Value>
             </Setter>
          </DataTrigger>
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}" 
                       Value="True">
            <Setter TargetName="ContentPresenter" 
                    Property="Content">
              <Setter.Value>
                <MarqueeTextBlock Text="{Binding Title}"                           
                                  Style="{StaticResource AOTbMain_MARQUEE}"/>
               </Setter.Value>
             </Setter>
          </DataTrigger>
        </DataTemplate.Triggers>
      </DataTemplate>
    </AutoscrollListBox.ItemTemplate>
  </AutoscrollListBox>
</Grid>

Solution 3
Or toggle the Visibility:

<Grid>
  <AutoscrollListBox Name="Items" >
    <AutoscrollListBox.ItemTemplate>
      <DataTemplate>
        <Grid>
          <AutoscaleTextBlock x:Name="AutoscaleTextBlock" 
                              Text="{Binding Title}"                           
                              Style="{StaticResource AOTbMain_MARQUEE}"
                              Visibilty="Visible" />
           <MarqueeTextBlock x:Name="MarqueeTextBlock" 
                             Text="{Binding Title}"                           
                             Style="{StaticResource AOTbMain_MARQUEE}"
                             Visibilty="Collapsed" />
        </Grid>

        <DataTemplate.Triggers>
          <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}" 
                       Value="True">
            <Setter TargetName="AutoscaleTextBlock" 
                    Property="Visibility"
                    Value="Collapsed" />
            <Setter TargetName="MarqueeTextBlock" 
                    Property="Visibility"
                    Value="Visible" />
          </DataTrigger>
        </DataTemplate.Triggers>
      </DataTemplate>
    </AutoscrollListBox.ItemTemplate>
  </AutoscrollListBox>
</Grid>

Upvotes: 1

Related Questions