Question

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

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

当用户使用触发器悬停项目时，我已设法更改BorderThickness。但是，我在哪里可以保存有关选择哪种颜色的信息？我真的不能想到这里的方法。即使选择的触发器已被激活，我怎样才能管理悬停触发器仍会触发？

提前致谢。

Answer 1

这里有一些要考虑的标记和代码。列表框的Selected项也是collectionview的当前项。您可以绑定它，在viewmodel中的代码中获取它，并导航到next和previous。 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>

viewmodel：

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

椭圆作为单选按钮

1 个答案: