CODEWITHSUNDEEP
wpfxamlstyles
Berryl
Berryl

Reputation: 12833

BInding from Template within a Style

I'm trying to work out the ControlTemplate.Triggers in the Style below, and I haven't figured out how to find the named Ellipse and Path properties.

For example, when IsMouseOver, change the background of the Ellipse. What is a good way to find the Ellipse so I can set the Fill property the way I have set up this Style? Is there a better way to lay it out?

Cheers,
Berryl

<Style x:Key="CloseCrossToggleButtonStyle" TargetType="{x:Type ToggleButton}">

<Setter Property="ContentTemplate">  
    <Setter.Value>
        <DataTemplate>

            <Grid Background="Transparent">

                <!-- The background of the button, as an ellipse. -->
                <Ellipse x:Name="theEllipse" />

                <!-- A path that renders a cross. -->
                <Path x:Name="theCross"...

            </Grid>

        </DataTemplate>
    </Setter.Value>
</Setter>

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <ContentPresenter x:Name="theContent"/>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Ellipse.Fill" Value="{StaticResource HoverBackgroundBrush}" />
                    <Setter Property="Path.Stroke" Value="{StaticResource HoverForegroundBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

ok, working

 <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
            <Grid Background="Transparent">
                <!-- The background of the button, as an ellipse. -->
                <Ellipse x:Name="theEllipse" />
                <!-- A path that renders a cross. -->
                <Path x:Name="theCross"
                      ...
                </Path>

            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="theEllipse" Property="Fill" Value="{StaticResource HoverBackgroundBrush}" />
                    <Setter TargetName="theCross" Property="Stroke" Value="{StaticResource HoverForegroundBrush}"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Visibility" Value="Collapsed"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="theEllipse" Property="Fill" Value="{StaticResource PressedBackgroundBrush}" />
                    <Setter TargetName="theEllipse" Property="Stroke" Value="{StaticResource PressedBorderBrush}" />
                    <Setter TargetName="theCross" Property="Stroke" Value="{StaticResource PressedForegroundBrush}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Upvotes: 2

Views: 717

Answers (1)

J. Lennon
J. Lennon

Reputation: 3361

In ControlTemplate.Triggers you can only manipulate controls that are inside the ContentTemplate, you do not have access to elements the ContentTemplate out of Template.

You can do like my example below (I am changing the button image...):

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                <Image x:Name="imgBackground" Source="{StaticResource UpArrowImageNormal}" Stretch="None"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="imgBackground"
                            Property="Source" Value="{StaticResource UpArrowImageIsPressed}"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="imgBackground" Property="Source" Value="{StaticResource UpArrowImageDisabled}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Unfortunately I do not know about ways to apply triggers a data template. I believe it can only apply a trigger in ContentPresenter...

Correction, it seems that you can use this (sample):

<Button x:Name="btnTest" Height="23" Width="75"  HorizontalAlignment="Left"  VerticalAlignment="Top" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
            <Button.ContentTemplate>
                <DataTemplate>
                    <Rectangle x:Name="t" Fill="Azure" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
                    <DataTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="t" Property="Fill" Value="Black"/>
                        </Trigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Button.ContentTemplate>
        </Button>

Upvotes: 1

Related Questions