椭圆作为单选按钮答案

【问题标题】：Ellipse as radio button椭圆作为单选按钮
【发布时间】：2018-03-29 17:58:43
【问题描述】：

在我的项目中，我有一个小颜色选择器，它实际上是一个 ItemsControl，其中 SolidColorBrushes 作为项目，Ellipse 作为 ItemTemplate。

我希望用户选择一种颜色，当他单击椭圆时，我希望 BorderThickness 从 0 变为 2，以突出显示选定的椭圆。

当用户悬停该项目时，我已经设法使用触发器更改了 BorderThickness。但是我将在哪里保存有关选择哪种颜色的信息？我真的想不出这里的方法。即使已激活 selected 的触发器，我如何管理悬停触发器仍会触发？

提前致谢。

【问题讨论】：

到目前为止你能粘贴你的代码吗？
为什么不使用字符串变量并将颜色值传递给它？
如果您想要选择功能，请使用 ListBox 而不是 ItemsControl。无需重新发明 WPF 提供的现有选择逻辑。 ListBox 派生自 ItemsControl，因此所需的大部分更改只是将您的 ItemsControl 替换为 ListBox 并更改您的 ItemsTemplate（可能还引入 ItemContainerStyle），以便它反映项目的选定状态（参见此处：stackoverflow.com/questions/146269/…）

标签： c# wpf triggers itemscontrol ellipse

【解决方案1】：

这里有一些要考虑的标记和代码。列表框的 Selected 项也成为 collectionview 的当前项。您可以绑定它，在视图模型中的代码中获取它，还可以导航到下一个和上一个。 https://msdn.microsoft.com/en-us/library/system.windows.data.collectionview.currentitem%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396

我将矩形绑定到当前画笔，因此当您选择不同的条目时会发生变化。当您将鼠标悬停在某个项目上时，列表框已经有一个浅蓝色背景，该项目会稍微突出显示它。我的触发器也稍微增加了椭圆的大小。

<Window.DataContext>
    <local:MainWIndowViewModel/>
</Window.DataContext>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ListBox ItemsSource="{Binding BrushesView}"
             IsSynchronizedWithCurrentItem="True"
             > 
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Ellipse Fill="{Binding}" Height="20" Width="20">
                    <Ellipse.Style>
                        <Style TargetType="Ellipse">
                            <Setter Property="Stroke"          Value="Gray"/>
                            <Setter Property="StrokeThickness" Value="1"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={
                                       RelativeSource Mode=FindAncestor, AncestorType=ListBoxItem}}"
                                       Value="True">
                                    <Setter Property="Ellipse.Stroke" Value="Black"/>
                                    <Setter Property="Ellipse.StrokeThickness" Value="2"/>
                                </DataTrigger>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="RenderTransform">
                                        <Setter.Value>
                                            <ScaleTransform ScaleX="1.2" ScaleY="1.2" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Ellipse.Style>
                </Ellipse>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Rectangle           
               Grid.Column="1"
               Width="40"
               Height="40"
               Fill="{Binding BrushesView/}"/>
</Grid>

视图模型：

public class MainWIndowViewModel
{
    public CollectionView BrushesView { get; set; }
    private ObservableCollection<SolidColorBrush> BrushesList { get; set; } =
        new ObservableCollection<SolidColorBrush>
        {
            Brushes.Yellow, Brushes.Pink, Brushes.Blue, Brushes.Green, Brushes.Red, Brushes.Purple
        };
    public MainWIndowViewModel()
    {
        BrushesView = (CollectionView)new CollectionViewSource { Source = BrushesList }.View;
    }
}

【讨论】：