绑定到ControlTemplate内的嵌套属性

时间:2018-03-16 14:59:00

标签: xaml

目的是为我的自定义按钮模板构建图标路径几何的资源字典。

到目前为止有效:

的ResourceDictionary:

<Geometry x:Key="ArrowDown">
    M0,10 M10,0 M5,1 L5,7 4.2,7 5,8 5.8,7 5,7
</Geometry>
<Geometry x:Key="ArrowUp">
    M0,0 M10,10 M5,9 L5,3 4.2,3 5,2 5.8,3 5,3
</Geometry>

路径的附加属性:

public static Geometry GetIconPath(UIElement element)
{
    return (Geometry)element.GetValue(IconPathProperty);
}

public static void SetIconPath(UIElement element, Geometry value)
{
    element.SetValue(PIconPathProperty, value);
}

public static readonly DependencyProperty IconPathProperty =
    DependencyProperty.RegisterAttached("IconPath", typeof(Geometry), typeof(Attached));

模板:

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
    <Viewbox>
        <Path Name="Icon" Stroke="Black" StrokeThickness="1" Stretch="Uniform"
              Data="{Binding (local:Attached.IconPath), RelativeSource={RelativeSource TemplatedParent}}"/>
    </Viewbox>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Stroke" TargetName="Icon" Value="Gray"/>
            <Setter TargetName="Icon" Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="0.2" Color="Black" Direction="125"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

按钮:

<Button local:Attached.IconPath="{StaticResource ArrowDown}"/>

这很好用,但我现在增加了一层复杂性:一些图标需要填充而其他图标不需要填充。我想在ResourceDictionary中使用GeometryData获取此信息。

一种解决方案是将整个Path存储在ResourceDictionary中,但正如您在ControlTemplate中看到的,我需要能够访问Path以触发DropShadowEffect。

所以我尝试的替代解决方案是使用POCO将这两个元素存储在:

public class IconData
{
    public bool Fill { get; set; }
    public Geometry Geometry { get; set; }
}

所以ResourceDictionary现在包含:

<local:IconData x:Key="ArrowUp" Fill="True" Geometry="
    M0,0 M10,10 M5,9 L5,3 4.2,3 5,2 5.8,3 5,3"/>

使用适当的附加属性,ControlTemplate变为:

<ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
    <Viewbox>
        <Path Name="Icon" Stroke="Black" StrokeThickness="1" Stretch="Uniform"
              Data="{Binding (local:Attached.IconData.Geometry), RelativeSource={RelativeSource TemplatedParent}}"/>
    </Viewbox>
    <ControlTemplate.Triggers>
        <Trigger Property="local:Attached.IconData.Fill" Value="True">
            <Setter Property="Fill" TargetName="Icon" Value="#00000000"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Stroke" TargetName="Icon" Value="Gray"/>
            <Setter TargetName="Icon" Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="0.2" Color="Black" Direction="125"/>
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

不幸的是,这里对IconData的引用都说Nested types are not supported: Attached.IconData

我愿意接受我的实施或任何解决方法或不同解决方案的解决方案。

1 个答案:

答案 0 :(得分:4)

<Path Name="Icon" Stroke="Black" StrokeThickness="1" Stretch="Uniform"
      Data="{Binding (local:Attached.IconData.Geometry), RelativeSource={RelativeSource TemplatedParent}}"/>

此处(local:Attached.IconData.Geometry)表示嵌套类型。要获取Attached.IconData对象的属性,应使用以下绑定路径:

<Path Name="Icon" Stroke="Black" StrokeThickness="1" Stretch="Uniform"
      Data="{Binding (local:Attached.IconData).Geometry, RelativeSource={RelativeSource TemplatedParent}}"/>

另请务必在Geometry类型中将附加的媒体资源类型从IconData更改为Attached

IconData类不应该嵌套到任何类型,因为它正是所谓的不支持(只是放在与其他使用类型相同的命名空间中)。

经过这些修改后,您的代码开始为我工作。

这是主窗口XAML:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="250" Width="260">
    <Window.Resources>
        <ResourceDictionary>
            <local:IconData x:Key="ArrowUp" Fill="False" Geometry="M0,0 M10,10 M4.8,9 4.8,3 4.2,3 5,2 5.8,3 5.2,3 5.2,9 Z"/>
            <ControlTemplate x:Key="ButtonTemplate" TargetType="{x:Type Button}">
                <Viewbox>
                    <Path Name="Icon" Stretch="Uniform"
                          Data="{Binding (local:Attached.IconPath).Geometry, RelativeSource={RelativeSource TemplatedParent}}">
                        <Path.Style>
                            <Style TargetType="Path">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding (local:Attached.IconPath).Fill, RelativeSource={RelativeSource TemplatedParent}}"
                                                     Value="True">
                                        <Setter Property="Fill" Value="Black" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding (local:Attached.IconPath).Fill, RelativeSource={RelativeSource TemplatedParent}}"
                                                     Value="False">
                                        <Setter Property="Stroke" Value="Black" />
                                        <Setter Property="StrokeThickness" Value="0.2" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Path.Style>
                    </Path>
                </Viewbox>
            </ControlTemplate>

        </ResourceDictionary>
    </Window.Resources>

    <Button local:Attached.IconPath="{StaticResource ArrowUp}" Template="{StaticResource ButtonTemplate}" />
</Window>

请注意,我修改了M0,0 M10,10 M4.8,9 4.8,3 4.2,3 5,2 5.8,3 5.2,3 5.2,9 Z上的路径几何图形以使其关闭,因此适合填充。

以下是案例<local:IconData Fill="False" ... /><local:IconData Fill="True" ... />的屏幕截图:

A screenshot for case Fill=False A screenshot for case Fill=True