在 Canvas 上选择已绑定的路径

Question

我对 WPF 还有些陌生，所以如果我遗漏了一两个明显的概念，我深表歉意。

我正在使用遵循 MVVM 范例的 WPF。我真正的问题有点复杂，所以我会尽量简化。假设我在画布上有一些（实际上是很多）路径：

<Canvas x:Name="Canvas1" Width="600" Height="300">
   <Path x:Name="Path1" Style="{StaticResource PathStyle}" .../>
   <Path x:Name="Path2" Style="{StaticResource PathStyle}" .../>
   <Path x:Name="Path3" Style="{StaticResource PathStyle}" .../>
/>

我使用的那种样式包含一些绑定，使所有路径保持相同的颜色，如下所示：

<Style x:Key="PathStyle" TargetType="Path">
    <Setter Property="Fill" Value="{Binding FillColor, Converter={StaticResource BrushConverter}}"/>
    <Setter Property="Stroke" Value="{Binding StrokeColor, Converter={StaticResource BrushConverter}}"/>
</Style>

当用户点击其中一条路径时，我可以捕捉到。当他们这样做时，我想“覆盖”绑定并更改所述路径的颜色，直到用户单击另一个。当他们单击它时，我可以手动设置Path.Stroke，但我不知道在清除SelectedPath 后如何“重新激活”绑定（因此路径保持我设置的任何颜色）。我尝试获取绑定表达式以强制刷新，但返回结果为 null (selectedPath.GetBindingExpression(Path.StrokeProperty))。

TL;DR：我想让它在用户单击路径时变为蓝色。当单击另一条路径时，我希望它根据样式中的绑定返回到 假定 的任何颜色。

有什么想法吗？感谢您抽出宝贵时间！

编辑：感谢您的中肯建议-如果我可以再推一点，如果有嵌套画布怎么办，但我仍然只想选择一个路径？如：

<Canvas x:Name="Canvas_Main" Width="600" Height="300">
   <Canvas x:Name="Canvas1" Width="600" Height="300">
      <Path x:Name="Path1" Style="{StaticResource PathStyle}" .../>
      <Path x:Name="Path2" Style="{StaticResource PathStyle}" .../>
      <Path x:Name="Path3" Style="{StaticResource PathStyle}" .../>
   />
   <Canvas x:Name="Canvas1" Width="600" Height="300">
      <Path x:Name="Path1" Style="{StaticResource PathStyle}" .../>
      <Path x:Name="Path2" Style="{StaticResource PathStyle}" .../>
      <Path x:Name="Path3" Style="{StaticResource PathStyle}" .../>
   />
/>

Answer 1

以下内容：

1. 使用ListBox，它提供项目选择。
2. 将路径移动到ListBox 或绑定ListBox.ItemsSource。
3. 将ListBox.ItemsPanel 设置为Canvas。
4. 在路径样式中引入在{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}} 上触发的DataTrigger
5. 将Setter 添加到触发器，以根据需要更改所选路径的颜色。
6. （如果默认情况下看起来很奇怪，请添加 ListBox.ItemContainerStyle 以覆盖 ListBoxItem.Template。）

---

编辑：很好奇它是否按预期工作，所以这里有一个独立的例子：

<ListBox Height="300" Width="300">
    <ListBox.Resources>
        <Style TargetType="Path">
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="Fill" Value="Red"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
                             Value="True">
                    <Setter Property="Fill" Value="Blue"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.Resources>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <Path>
        <Path.Data>
            <RectangleGeometry Rect="50,50,25,25" />
        </Path.Data>
    </Path>
    <Path>
        <Path.Data>
            <RectangleGeometry Rect="0,0,25,25" />
        </Path.Data>
    </Path>
</ListBox>

Answer 2

此方法也使用 ListBox，但将 ListBoxItem 的 Background 和 BorderBrush 属性用于 Path 的 Fill 和 Stroke：

<ListBox ItemsSource="{Binding PathItems}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Background" Value="Azure"/>
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Path Data="{Binding Geometry}"
                              Fill="{TemplateBinding Background}"
                              Stroke="{TemplateBinding BorderBrush}"
                              StrokeThickness="3"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="Pink"/>
                    <Setter Property="BorderBrush" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

假设存在这样的视图模型：

public class PathItem
{
    public Geometry Geometry { get; set; }
}

public class ViewModel
{
    public ObservableCollection<PathItem> PathItems { get; set; }
}

---

如果视图模型还应提供选定和未选定状态的填充和描边，您通常会在项目级别定义它们，例如如下所示（这也可以让您选择拥有个人每个项目的颜色或画笔。

public class PathItem
{
    public Geometry Geometry { get; set; }
    public Brush UnselectedFill { get; set; }
    public Brush UnselectedStroke { get; set; }
    public Brush SelectedFill { get; set; }
    public Brush SelectedStroke { get; set; }
}

然后绑定到 ItemContainerStyle 中的那些属性：

<Style TargetType="ListBoxItem">
    <Setter Property="Background" Value="{Binding UnselectedFill}"/>
    <Setter Property="BorderBrush" Value="{Binding UnselectedStroke}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Path Data="{Binding Geometry}"
                      Fill="{TemplateBinding Background}"
                      Stroke="{TemplateBinding BorderBrush}"
                      StrokeThickness="3"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="{Binding SelectedFill}"/>
            <Setter Property="BorderBrush" Value="{Binding SelectedFill}"/>
        </Trigger>
    </Style.Triggers>
</Style>