椭圆作为单选按钮

Question

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

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

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

提前致谢。

Answer 1

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

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

<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;
    }
}

椭圆作为单选按钮

Ellipse as radio button

c#

wpf

triggers

itemscontrol

ellipse