c# - 将显示的模式(路径)绑定(bind)到数据模型/如何使路径具有相同的尺寸

Question

背景

[请随意跳过]

我正在构建一个处理马匹、它们的主人和主人的赛马颜色(丝绸)的程序。这个问题是关于一个 UserControl , 称为 SilksControl作为 JockeySilks 的 View .

为了表示丝绸，我使用以下枚举类:

public class JockeySilks
{
    public BodyPatterns BodyPattern { get; set; }
    public Colour BodyColour1 { get; set; }
    public Colour BodyColour2 { get; set; }

    public SleevePatterns SleevePattern { get; set; }
    public Colour SleeveColour1 { get; set; }
    public Colour SleeveColour2 { get; set; }

    public CapPatterns CapPattern { get; set; }
    public Colour CapColour1 { get; set; }
    public Colour CapColour2 { get; set; }
}

如您所见，骑师丝绸的每个元素都有不同的图案和颜色。每个元素的主要部分是[Item]Colour1，图案由[Item]Colour2填充。

基本组成SilksControl是 ViewBox包含 Canvas其中又包含许多 Path秒。我将每个图案绘制为 Path在 child 体内 Canvas .

Here's a picture.在这个例子中，CapPattern和 BodyPattern设置为 Plain , 和 ArmPattern设置为 Chevrons .

问题

我正在尝试找出基于 WPF 数据绑定(bind)设置模式的最佳方法。但是，有一个问题:每个模式 Path有不同的Canvas.Top和 Canvas.Left值(value)和维度。我所说的“最佳方式”是指简单、可读且易于实现的方式。

我想过的方法

1. 在代码中切换路径 - 可能类似于 pthCapPattern = CapPatterns[SilksModel.CapPattern]其中 CapPatterns是 Dictionary<CapPattern,Path>或者可能从资源中访问它
   • 但不是绑定(bind)，我必须实现一些事件和东西
2. 将某些控件/面板的内容绑定(bind)到 SilksModel.[Item]Pattern使用从资源/字典生成/拉出路径的转换器
   • 哪个控件？
   • 可能必须生成全新的路径
   • 有点资源密集型
3. 拥有所有Path XAML 中的 s 并更改每个的可见性
   • 这很尴尬很奇怪
4. 想出一种方法来调和维度上的差异，然后创建 1 条路径并绑定(bind)到它的 Path.Data属性(可能有一些 StreamGeometry 在资源中，使用转换器从枚举转到 StreamGeometry )
   • 我不知道如何给它们相同的尺寸，因此 Canvas偏移量。 :(

所以解决方案 4 是我的首选解决方案，但正如我所提到的，我不知道我该怎么做，而且我的谷歌搜索技能也无法提供任何有用的信息。如果做不到这一点，解决方案 2 将是下一个最好的选择，但我不知道有任何容器可以提供与 Canvas 相同的功能并提供与子/内容的绑定(bind)。

编辑 1:

<Canvas x:Name="SPatterns" Height="173" Canvas.Left="6.8" Canvas.Top="107" Width="236.6">
    <Path x:Name="Chevrons" Fill="{Binding SilksModel.BodyColour2, Converter={StaticResource DBColourToColorConverter}, ElementName=root" Height="134.125" Canvas.Left="1.087" Stretch="Fill" Stroke="Black" Canvas.Top="21.667" Width="234.168" Data="M21.750001,94.749999 L34.000002,117.66218 30.625003,133.62501 17.000006,113.32909 0.5,126.75 3.2500048,108.125 z M212.418,93.416999 L230.918,106.79199 233.668,125.41701 217.168,111.99609 203.543,132.292 200.168,116.32917 z M32.25,48.374999 L44.250004,72.249999 40.625004,90.249999 28.000003,68.581336 7.750001,82.249999 11.665709,64.166339 z M201.918,47.041991 L222.50229,62.833335 226.418,80.916991 206.168,67.248336 193.543,88.916999 189.918,70.916991 z M41,1.8329993 L55.000002,28.166337 51.66667,45.832999 37.333336,23.499837 16.666001,37.417269 21.66571,19.418135 z M193.168,0.5 L212.50229,18.085143 217.502,36.084262 196.83467,22.166836 182.50133,44.499991 179.168,26.833333 z" />
    <!-- More SleevePatterns -->
</Canvas>

Answer 1

这可能不是最干净的解决方案，但这样的解决方案对您有用吗(显然您会将几何体初始化移出构造函数)？

您可以创建您建议的 Dictionary<CapPattern,Path>对象并用您的路径信息填充它，但也应用 Transform到 Geometry给它你想要的尺寸/偏移量，相对于 Canvas .

public partial class Horses : UserControl, INotifyPropertyChanged
{
    public enum CapPattern { ChevronPattern, SomeOtherPattern };
    public Dictionary<CapPattern, Geometry> Patterns { get; set; }

    private Geometry currentPath;
    public Geometry CurrentPath
    {
        get { return this.currentPath; }
        set 
        { 
            this.currentPath = value;
            NotifyPropertyChanged();
        }
    }

    public Horses()
    {
        Patterns = new Dictionary<CapPattern, Geometry>();          

        Patterns.Add(
            CapPattern.ChevronPattern,
            Geometry.Combine(
                Geometry.Parse("M21.750001,94.749999 L34.000002,117.66218 30.625003,133.62501 17.000006,113.32909 0.5,126.75 3.2500048,108.125 z M212.418,93.416999 L230.918,106.79199 233.668,125.41701 217.168,111.99609 203.543,132.292 200.168,116.32917 z M32.25,48.374999 L44.250004,72.249999 40.625004,90.249999 28.000003,68.581336 7.750001,82.249999 11.665709,64.166339 z M201.918,47.041991 L222.50229,62.833335 226.418,80.916991 206.168,67.248336 193.543,88.916999 189.918,70.916991 z M41,1.8329993 L55.000002,28.166337 51.66667,45.832999 37.333336,23.499837 16.666001,37.417269 21.66571,19.418135 z M193.168,0.5 L212.50229,18.085143 217.502,36.084262 196.83467,22.166836 182.50133,44.499991 179.168,26.833333 z"),
                Geometry.Empty, 
                GeometryCombineMode.Union, 
                new TranslateTransform(0, 0)));
        Patterns.Add(
            CapPattern.SomeOtherPattern, 
            Geometry.Combine(
                Geometry.Parse("M21.750001,94.749999 L34.000002,117.66218 30.625003,133.62501 17.000006,113.32909 0.5,126.75 3.2500048,108.125 z M212.418,93.416999 L230.918,106.79199 233.668,125.41701 217.168,111.99609 203.543,132.292 200.168,116.32917 z M32.25,48.374999 L44.250004,72.249999 40.625004,90.249999 28.000003,68.581336 7.750001,82.249999 11.665709,64.166339 z M201.918,47.041991 L222.50229,62.833335 226.418,80.916991 206.168,67.248336 193.543,88.916999 189.918,70.916991 z M41,1.8329993 L55.000002,28.166337 51.66667,45.832999 37.333336,23.499837 16.666001,37.417269 21.66571,19.418135 z M193.168,0.5 L212.50229,18.085143 217.502,36.084262 196.83467,22.166836 182.50133,44.499991 179.168,26.833333 z"), 
                Geometry.Empty, 
                GeometryCombineMode.Union, 
                new TranslateTransform(20, 30)));           

        InitializeComponent();
    }

    // INotifyPropertyChanged implementaton.

}

在我的模型中，我填充了一个 ComboBox来自设置属性的字典 CurrentPath , 它绑定(bind)到 Path在 Canvas 上:

<Grid>
    <StackPanel>
        <ComboBox ItemsSource="{Binding Path=Patterns}"
                  SelectedValue="{Binding Path=CurrentPath}"
                  SelectedValuePath="Value"
                  DisplayMemberPath="Key"/>
        <Canvas>
            <Path Data="{Binding Path=CurrentPath}" Stroke="Black" StrokeThickness="1" />
        </Canvas>
    </StackPanel>
</Grid>

您将保留对 Fill 的绑定(bind)和其他属性。

另一种方法可能是制作一个小的 Class里面有你的Path信息，以及所需的 Top , Left , Transform或定位图案所需的任何其他信息。然后，您可以将这些对象的列表绑定(bind)到 ComboBox。以类似于上述的方式，并在 Canvas 上绑定(bind)所有必需的属性和 Path到当前选定对象的属性。

编辑:

您还可以在 ResourceDictionary 中配置您的转换按照这些思路:

<Path x:Name="Chevrons" Fill="{Binding SilksModel.BodyColour2, Converter={StaticResource DBColourToColorConverter}, ElementName=root" Data="M21.750001,94.749999 L34.000002,117.66218 30.625003,133.62501 17.000006,113.32909 0.5,126.75 3.2500048,108.125 z M212.418,93.416999 L230.918,106.79199 233.668,125.41701 217.168,111.99609 203.543,132.292 200.168,116.32917 z M32.25,48.374999 L44.250004,72.249999 40.625004,90.249999 28.000003,68.581336 7.750001,82.249999 11.665709,64.166339 z M201.918,47.041991 L222.50229,62.833335 226.418,80.916991 206.168,67.248336 193.543,88.916999 189.918,70.916991 z M41,1.8329993 L55.000002,28.166337 51.66667,45.832999 37.333336,23.499837 16.666001,37.417269 21.66571,19.418135 z M193.168,0.5 L212.50229,18.085143 217.502,36.084262 196.83467,22.166836 182.50133,44.499991 179.168,26.833333 z" Stroke="Black" StrokeThickness="1">
    <Path.RenderTransform>
        <TranslateTransform X="20" Y="120"/>
    </Path.RenderTransform>
</Path>