wpf：将样式 DataTrigger 更改为 ControlTemplate DataTrigger

wpf: change a style DataTrigger to a ControlTemplate DataTrigger

提问by Andy

I have a large ControlTemplate for a ToggleButton. I am trying to add a data trigger with no succes.

我有一个用于 ToggleButton 的大型 ControlTemplate。我正在尝试添加一个没有成功的数据触发器。

I have however manged to add it using a style, as shown below:

然而，我设法使用样式添加它，如下所示：

    <Window.Resources>
    <Style x:Key="toggleBtnStyle" TargetType="{x:Type ToggleButton}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=myProperty}" Value="true">
                <Setter Property="Content" Value="IS TRUE"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=myProperty}" Value="false">
                <Setter Property="Content" Value="IS FALSE"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

<ToggleButton Height="34" HorizontalAlignment="Left" x:Name="toggleBroadcast" Click="Button_Click" VerticalAlignment="Top" Width="133" Margin="180,0,0,0" Style="{DynamicResource toggleBtnStyle}"/>

Is there a way to add this to a Control Template? I have the following control template which is triggered on the IsChecked Property of the ToggleButton, I am trying to change it to the DataTrigger in the Style above, without success.

有没有办法将它添加到控制模板？我有以下控件模板，它在 ToggleButton 的 IsChecked 属性上触发，我试图将其更改为上面样式中的 DataTrigger，但没有成功。

        <ControlTemplate x:Key="ClipBoardButton1" TargetType="{x:Type ToggleButton}">
        <Border BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" BorderBrush="Black" Background="Black" >
            <Grid>
                <Border x:Name="BorderUp" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" Background="Blue"/>
                <Border x:Name="BorderDown" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" Opacity="0" Background="Aqua"/>
                <ContentPresenter x:Name="Contents" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Margin="0,0,0,0"/>
            </Grid>
        </Border>

        <ControlTemplate.Resources>
            <Storyboard x:Key="ButtonDownTimeLine">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BorderDown" Storyboard.TargetProperty="Opacity">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1"/>
                </DoubleAnimationUsingKeyFrames>
                <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Contents" Storyboard.TargetProperty="Margin">
                    <SplineThicknessKeyFrame KeyTime="00:00:00.025" Value="0.5,0.5,0,0"/>
                </ThicknessAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="ButtonUpTimeLine">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BorderDown" Storyboard.TargetProperty="Opacity">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
                </DoubleAnimationUsingKeyFrames>
                <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Contents" Storyboard.TargetProperty="Margin">
                    <SplineThicknessKeyFrame KeyTime="00:00:00.25" Value="0,0,0,0"/>
                </ThicknessAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>

        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource ButtonDownTimeLine}"/>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard Storyboard="{StaticResource ButtonUpTimeLine}"/>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

To be clear:

要清楚：

1. I want to use a DataTrigger on myProperty
2. Have the same Trigger action as the IsChecked action currently. (Implement the Storyboards)

1. 我想在 myProperty 上使用 DataTrigger
2. 当前具有与 IsChecked 操作相同的 Trigger 操作。（实现故事板）

I have tried lots of different things and searched through so many posts, but cant find the answer I am seeking.

我尝试了很多不同的东西并搜索了很多帖子，但找不到我正在寻找的答案。

Can anyone tell me what I need to do ?

谁能告诉我我需要做什么？

回答by sthotakura

I guess, you are using astyle to apply this Templateto ToggleButton. If not, create a default style for ToggleButtonand Set Templateproperty to your ControlTemplate

我想，你正在使用一个样式将其应用Template到ToggleButton。如果没有，请创建一个默认样式ToggleButton并将Template属性设置为您的ControlTemplate

<Style TargetType="ToggleButton">
    <Setter Property="Template" Value="{StaticResource ClipBoardButton1}" />
</Style>

And, coming to your problem around using DataTriggers, I wouldn't add DataTriggersto ControlTemplate, because, think about this scenario, what happens when you want to use this same template at a different place where the property name is different (not myProperty)?

而且，关于使用 DataTriggers 的问题，我不会添加DataTriggers到ControlTemplate，因为，考虑一下这种情况，当您想在属性名称不同（不是myProperty）的不同地方使用相同的模板时会发生什么？

To achieve what you are trying, you can update your Triggerin the ControlTemplateto the following:

为了实现您的尝试，您可以将您的Triggerin更新ControlTemplate为以下内容：

<Trigger Property="IsChecked" Value="True">
    <Setter Property="Content" Value="IS TRUE" />
    <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource ButtonDownTimeLine}"/>
    </Trigger.EnterActions>
    <Trigger.ExitActions>
        <BeginStoryboard Storyboard="{StaticResource ButtonUpTimeLine}"/>
    </Trigger.ExitActions>
</Trigger>
<Trigger Property="IsChecked" Value="False">
    <Setter Property="Content" Value="IS FALSE"></Setter>
</Trigger>

and Bind IsCheckedproperty of ToggleButtonto your myProperty

并将 的IsChecked属性绑定ToggleButton到您的myProperty

<ToggleButton Height="34" HorizontalAlignment="Left" 
              x:Name="toggleBroadcast" 
              Click="Button_Click" 
              VerticalAlignment="Top" 
              Width="133" Margin="180,0,0,0" 
              IsChecked="{Binding myProperty}"/>

UPDATE

更新

Replace your trigger in ControlTemplatewith:

将您的触发器替换ControlTemplate为：

<DataTrigger Binding="{Binding myProperty}" Value="True">
    <DataTrigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource ButtonDownTimeLine}"/>
    </DataTrigger.EnterActions>
    <DataTrigger.ExitActions>
        <BeginStoryboard Storyboard="{StaticResource ButtonUpTimeLine}"/>
    </DataTrigger.ExitActions>
</DataTrigger>

回答by Kumareshan

You can use the control template with in the style. as below. I hope this helps

您可以在样式中使用控件模板。如下。我希望这有帮助

<Window.Resources>
    <Style x:Key="toggleBtnStyle" TargetType="{x:Type ToggleButton}">
        <Style.Triggers>
            <DataTrigger Binding="{Binding Path=myProperty}" Value="true">
                <Setter Property="Content" Value="IS TRUE"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=myProperty}" Value="false">
                <Setter Property="Content" Value="IS FALSE"/>
            </DataTrigger>
        </Style.Triggers>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" BorderBrush="Black" Background="Black" >
                        <Grid>
                            <Border x:Name="BorderUp" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" Background="Blue"/>
                            <Border x:Name="BorderDown" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" Opacity="0" Background="Aqua"/>
                            <ContentPresenter x:Name="Contents" HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Margin="0,0,0,0"/>
                        </Grid>
                    </Border>

                    <ControlTemplate.Resources>
                        <Storyboard x:Key="ButtonDownTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BorderDown" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Contents" Storyboard.TargetProperty="Margin">
                                <SplineThicknessKeyFrame KeyTime="00:00:00.025" Value="0.5,0.5,0,0"/>
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                        <Storyboard x:Key="ButtonUpTimeLine">
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BorderDown" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
                            </DoubleAnimationUsingKeyFrames>
                            <ThicknessAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Contents" Storyboard.TargetProperty="Margin">
                                <SplineThicknessKeyFrame KeyTime="00:00:00.25" Value="0,0,0,0"/>
                            </ThicknessAnimationUsingKeyFrames>
                        </Storyboard>
                    </ControlTemplate.Resources>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard Storyboard="{StaticResource ButtonDownTimeLine}"/>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <BeginStoryboard Storyboard="{StaticResource ButtonUpTimeLine}"/>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>