Question

我有点失去了采取的策略。我需要做以下事情：

我有一个切换按钮作为基类。此按钮具有所有属性作为普通按钮，加上IsChecked，它告诉我们是否切换按钮。

我想为ToggleButton创建一个样式（或模板）。基本上它必须从ToggleButton继承原始样式，并添加：

IsChecked = True：将工具提示设置为“折叠”并显示此内容（减号）

<Path Margin="2" Stroke="ForeGround property on control" Data="M0,5 H10" StrokeThickness="3" />

IsChecked = False，设置工具提示tp“展开”并显示此内容（加号）

<Path Margin="2" Stroke="ForeGround property on control" Data="M0,5 H10 M5,0 V10" StrokeThickness="3" />

我尝试了几种方法，总是想出一些我无法解决的异常。

另一种方法可以是只有一个内容（加号），但分为两行：

<Grid>
    <Path Margin="2" Stroke="ForeGround property on control" Data="M0,5 H10" StrokeThickness="3" />
    <Path x:Name="verticalLine" Margin="2" Stroke="ForeGround property on control" Data="M5,0 V10" StrokeThickness="3" />
</Grid>

他们根据扩展/崩溃状态改变了verticalLine的可见性。

我取得了一些进展：

<Style x:Key="myToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource ToggleButtonStyle}">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <Grid>
                <Path Margin="2" Stroke="Black" Data="M0,5 H10" StrokeThickness="3" />
                <Path x:Name="verticalLine" Margin="2" Stroke="Black" Data="M5,0 V10"  StrokeThickness="3" />
            </Grid>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.Target="verticalLine" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.Target="verticalLine" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>

我现在唯一不能做的就是将Stroke设置为ToggleButton的前景颜色。我已经尝试过所有我记得的，从TemplatedParent到AncestorType，并没有成功。

Answer 1

尝试根据Path.Data属性更改ToggleButtons IsChecked：

                  <ToggleButton.Style>
                        <Style TargetType="ToggleButton">
                            <Setter Property="ToolTip" Value="Collapsed"/>
                            <Setter Property="Content">
                                <Setter.Value>
                                    <Path Margin="2" Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ToggleButton}}" StrokeThickness="3">
                                        <Path.Style>
                                            <Style TargetType="Path">
                                                <Setter Property="Data" Value="M0,5 H10 M5,0 V10 "/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}" Value="True">
                                                        <Setter Property="Data" Value="M0,5 H10"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Path.Style>
                                    </Path>
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="ToolTip" Value="Expanded"/>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>

Answer 2

好的，这是最终解决方案：

<Style x:Key="MyToggleButtonStyle" TargetType="ToggleButton" BasedOn="{StaticResource ToggleButtonStyle}}">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Path Margin="4" Data="M0,5 H10" Stretch="UniformToFill" Stroke="{TemplateBinding Control.Foreground}" StrokeThickness="3" />
                    <Path x:Name="verticalLine" Margin="4" Data="M5,0 V10" Stretch="UniformToFill" Stroke="{TemplateBinding Control.Foreground}" StrokeThickness="3" />
                </Grid>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="verticalLine" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="verticalLine" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

根据属性值设置不同的内容

2 个答案: