将显示的模式（路径）绑定到数据模型/如何使路径具有相同的维度

背景

[随意跳过此]

我正在构建一个处理马匹、马匹主人以及主人的比赛颜色（丝绸）的程序。这个问题是关于一个UserControl，称为SilksControl充当视图JockeySilks.

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

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 is a ViewBox其中包含一个Canvas其中又包含一些Paths。我将每个图案绘制为Path在孩子体内Canvas.

这是一张照片。 https://i.stack.imgur.com/EpcL2.png在这个例子中，CapPattern and BodyPattern被设置为Plain, and ArmPattern被设定为Chevrons.

问题

我试图找出基于 WPF 数据绑定设置模式的最佳方法。然而，有一个问题：每种模式Path有不同的Canvas.Top and Canvas.Left值和尺寸。 我所说的“最佳方式”是指简单、可读且易于实现的方式。

我考虑过的方法

1. Switching the path in code - maybe something like pthCapPattern = CapPatterns[SilksModel.CapPattern] where CapPatterns is a Dictionary<CapPattern,Path> or maybe accessing it from the resources
   • 但不是绑定，我必须实现一些事件和东西
2. Binding the content of some control/panel to the SilksModel.[Item]Pattern with a converter that generates/pulls a Path from resources/dictionary
   • 哪个控制？
   • 可能必须生成全新的路径
   • 有点资源密集型
3. Have all the Paths in the XAML and change the visibility of each
   • 这真是尴尬又奇怪
4. Figure out a way to reconcile the differences in dimensions then create 1 path and bind to its Path.Data property (probably have some StreamGeometry in the resources, using a converter to go from enum to StreamGeometry)
   • 我不知道如何给它们相同的尺寸，因此Canvas偏移量。 :(

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

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

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

您可以创建您的建议Dictionary<CapPattern,Path>对象并用您的路径信息填充它，但也应用Transform to the 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，这绑定到一个Path on the 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和其他属性。

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

Edit:

您还可以在中配置您的转换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>