CODEWITHSUNDEEP
.netwpftriggers
elbweb
elbweb

Reputation: 599

Trigger within a Style to Set the Properties of a Control in a ControlTemplate

What I have now:

<Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
    <Style.Triggers>
        <Trigger Property="{Binding Path=IsChecked, ElementName=DetailView}" Value="False">
            <Setter TargetName="WrapPanelItem" Property="ItemHeight" Value="100" />
            <Setter TargetName="WrapPanelItem" Property="ItemWidth" Value="400" />
        </Trigger>
    </Style.Triggers>

    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}" >
                <WrapPanel Name="WrapPanelItem" Margin="5" IsItemsHost="True" Orientation="Horizontal"
                    ItemHeight="{Binding Value, ElementName=ZoomSlider }"
                    ItemWidth="{Binding Value, ElementName=ZoomSlider }"
                    VerticalAlignment="Top" HorizontalAlignment="Stretch" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The closest I got was to add the Name to the WrapPanel to try and reference from the Trigger above it, but the TargetName cannot be found. I also tried creating a separate style attached to the WrapPanel directly, but that caused issues with controls using the PhotoListBoxStyle that was it's parent:

<Style x:Key="WrapPanelSetter" TargetType="{x:Type WrapPanel}">
    <Setter Property="ItemHeight" Value="{Binding Value, ElementName=ZoomSlider }" />
    <Setter Property="ItemWidth" Value="{Binding Value, ElementName=ZoomSlider }" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Orientation" Value="Horizontal" />
    <Setter Property="Margin" Value="5" />

    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsChecked, ElementName=DetailView}" Value="False">
            <Setter Property="ItemHeight" Value="100" />
            <Setter Property="ItemWidth" Value="400" />
        </DataTrigger>
    </Style.Triggers>
</Style>

Thanks for any help. I am more than willing to try a different approach if there is a better option!

Upvotes: 1

Views: 2790

Answers (2)

elbweb
elbweb

Reputation: 599

I can use the ControlTemplate.Triggers within the ControlTemplate to add the DataTrigger with a TargetName of the control created in the ControlTemplate:

<Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}" >
                <WrapPanel Name="WrapPanelItem" Margin="5" IsItemsHost="True" Orientation="Horizontal"
                    ItemHeight="{Binding Value, ElementName=ZoomSlider }"
                    ItemWidth="{Binding Value, ElementName=ZoomSlider }"
                    VerticalAlignment="Top" HorizontalAlignment="Stretch" />
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=IsChecked, ElementName=DetailView}" Value="False">
                        <Setter TargetName="WrapPanelItem" Property="ItemHeight" Value="100" />
                        <Setter TargetName="WrapPanelItem" Property="ItemWidth" Value="400" />
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 1

Rachel
Rachel

Reputation: 132548

In your WrapPanel style, change your Trigger to a DataTrigger

Triggers are meant to be based off properties of the current UIElement, while DataTriggers are meant to be based off a binding to some other object

<Style x:Key="WrapPanelSetter" TargetType="{x:Type WrapPanel}">
    <Setter Property="ItemHeight" Value="{Binding Value, ElementName=ZoomSlider }" />
    <Setter Property="ItemWidth" Value="{Binding Value, ElementName=ZoomSlider }" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Orientation" Value="Horizontal" />
    <Setter Property="Margin" Value="5" />

    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsChecked, ElementName=DetailView}" Value="False">
            <Setter Property="ItemHeight" Value="100" />
            <Setter Property="ItemWidth" Value="400" />
        </DataTrigger >
    </Style.Triggers>
</Style>

Upvotes: 0

Related Questions