Question

我有一个自定义控件Cake，它包含两个名为Slice and Filling的DependencyProperties。 如何创建一个让我可以访问Slice的样式，还可以让我设计切片？

<Style TargetType={x:Type local:Cake}>
    //I don't like setting DataContext Here
    <Setter Property="DataContext" Value="{Binding RelativeSource={RelativeSource Self}}/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType={x:Type local:Cake}>
                <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">                        

                    //This is how I display a slice
                    <ContentPresenter Content={Binding Slice}/>

                    //This is how cake decorations are displayed
                    <ItemsPresenter/> 

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Slice">
        <Setter.Value>

            //Design Slice Here - it's easy to override when I want  
            <Slice Filling={Binding Filling}> // it's just in a setter.

        </Setter.Value>
    </Setter>
    <Setter Property="DataContext" Value="{Binding RelativeSource={RelativeSource Self}}/>
</Style>

我尝试过的选项：

我无法使用UserControl，因为我想允许命名内容，这显然不适用于用户控件。请参阅Here.
我不喜欢上面的示例，因为我必须将Cake容器的DataContext设置为self，这意味着用户无法使用DataContext来他们的 绑定。
我无法使用RelativeSource绑定Filling属性，因为有几个蛋糕，风格不知道哪一个是正确的父母。看到 Here.
我可以直接用Slice Element替换Content Presenter，但因为它在模板中，我无法访问Slice Anywhere 在模板之外。虽然我可能会将我的方式沿着visualTree转向切片，但这感觉是维护的噩梦。

我基本上希望每个蛋糕都有一个切片，并且能够使用

进行设置

<Cake.Slice>
    <DockPanel>
       <Rectangle Background= “Blue”/>
       <Rectangle Background= “Blue”/>
       <Rectangle Background=“{Binding Filling}”/>
    </DockPanel>
</Cake.Slice>

同时也给它一个默认的外观。

修改显然我的风格可行，只要我引用 Cake.dll 而不是Cake 项目。为什么会这样？

Answer 1

这不完全是您所需要的，但我希望它能指导您如何实现这一目标。

首先，您不需要将DataContext设置为控件本身，您可以使用{TemplateBinding Slice}从Cake的ControlTemplate绑定到Cake控件（Filling和Slice）上的属性，这只是一个{Binding Slice, RelativeSource={RelativeSource TemplatedParent}}的快捷方式（因此您可以使用其中一种）。

这将是您的控件的简化版本，因为我不知道ControlTemplate中的ItemPresenter应该呈现哪些项目，或者Slice and Filling属性的类型是什么。在此示例中，填充为SolidColorBrush，而Slice为Style。该样式应用于Cake的ContentControl中的ControlTemplate，因此您可以为切片预定义样式，并应用您选择的填充（如果您的Slice属性具有不同的用途，则可以引入另一个属性例如SliceStyle。）

蛋糕控制：

public class Cake : Control
{
    static Cake()
    {
        DefaultStyleKeyProperty.OverrideMetadata(
            typeof(Cake),
            new FrameworkPropertyMetadata(typeof(Cake)));
    }

    public SolidColorBrush Filling
    {
        get { return (SolidColorBrush)GetValue(FillingProperty); }
        set { SetValue(FillingProperty, value); }
    }

    public static readonly DependencyProperty FillingProperty =
        DependencyProperty.Register(
            "Filling",
            typeof(SolidColorBrush),
            typeof(Cake),
            new PropertyMetadata(Brushes.Transparent));

    public Style Slice
    {
        get { return (Style)GetValue(SliceProperty); }
        set { SetValue(SliceProperty, value); }
    }

    public static readonly DependencyProperty SliceProperty =
        DependencyProperty.Register(
            "Slice",
            typeof(Style),
            typeof(Cake),
            new PropertyMetadata(null));
}

默认样式（Generic.xaml）：

<Style TargetType="{x:Type local:Cake}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:Cake}">
                <ContentControl Width="{TemplateBinding Width}"
                                Height="{TemplateBinding Height}"
                                Style="{TemplateBinding Slice}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

不同的切片样式（这些是为ContentControl设置ControlTemplate，因此您不会在问题中遇到问题3）：

<Window.Resources>
    <Style x:Key="TwoLayeredSlice" TargetType="{x:Type ContentControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Rectangle Fill="{Binding Filling,
                            RelativeSource={RelativeSource AncestorType={x:Type local:Cake}}}"/>
                        <Rectangle Fill="Brown"
                                   Grid.Row="1"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="FourLayeredSlice" TargetType="{x:Type ContentControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Rectangle Fill="{Binding Filling,
                            RelativeSource={RelativeSource AncestorType={x:Type local:Cake}}}"/>
                        <Rectangle Fill="Brown"
                                   Grid.Row="1"/>
                        <Rectangle Fill="{Binding Filling,
                            RelativeSource={RelativeSource AncestorType={x:Type local:Cake}}}"
                                   Grid.Row="2"/>
                        <Rectangle Fill="Brown"
                                   Grid.Row="3"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

使用中的控件：

<Grid Background="Gray">
    <local:Cake Width="200"
                Height="100"
                HorizontalAlignment="Left"
                Filling="Gold"
                Slice="{StaticResource TwoLayeredSlice}"/>
    <local:Cake Width="200"
                Height="100"
                HorizontalAlignment="Center"
                Filling="Pink"
                Slice="{StaticResource FourLayeredSlice}"/>
    <local:Cake Width="200"
                Height="100"
                HorizontalAlignment="Right"
                Filling="Blue"
                Slice="{StaticResource FourLayeredSlice}"/>
</Grid>

Bon appetit！

吃我的蛋糕也吃掉它：绑定一个容器和它的内容

1 个答案: