从样式中的模板进行转换



我正在尝试在下面的样式中计算出ControlTemplate.Triggers,但我还没有弄清楚如何找到命名的椭圆和路径属性。

例如,当 IsMouseOver 时,更改椭圆的背景。查找椭圆以便可以按照设置此样式的方式设置 Fill 属性的好方法是什么?有没有更好的方法来布置它?

干杯
贝瑞尔

<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>

好的,正在工作

 <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>

在 ControlTemplate.Triggers 中,您只能操作 ContentTemplate 中的控件,您无权访问 ContentTemplate 之外的元素。

你可以像我下面的例子一样做(我正在更改按钮图像......

<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>

不幸的是,我不知道应用触发器数据模板的方法。我相信它只能在内容演示器中应用触发器...

更正,似乎您可以使用这个(示例):

<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>

相关内容

  • 没有找到相关文章

最新更新