Ellipse as radio button

Question

In my project, I have a little color picker that is in fact an ItemsControl with SolidColorBrushes as items, and an Ellipse as ItemTemplate.

I want the user to pick a color, when he clicks the Ellipse I want the BorderThickness to go from 0 to 2, in order to highlight the selected Ellipse.

I already managed to change the BorderThickness when the user hovers the item, using triggers. But where would I save the information about which color is selected? I can not really think of an approach here. And how can I manage that the trigger on hovering still fires even when the trigger for selected has already been activated?

Thanks in advance.

why not use a string variable and pass the color value to it ? — Software Dev, Mar 29 '18 at 18:02
If you want selection functionality, use a ListBox instead of an ItemsControl. No need to reinvent existing selection logic offered by WPF. ListBox derives from ItemsControl, so most of the changes required are just replacing your ItemsControl with ListBox and change your ItemsTemplate (and perhaps introduce a ItemContainerStyle) so that it reflects the selected status of the item (see here: https://stackoverflow.com/questions/146269/change-wpf-datatemplate-for-listbox-item-if-selected) — , Mar 29 '18 at 18:44

Andy · Accepted Answer · 2018-03-30T08:52:18.467

Here's some markup and code to consider. The Selected item of the listbox is also made the current item of the collectionview. You can bind that, get it in code in the viewmodel and also navigate to next and previous. https://msdn.microsoft.com/en-us/library/system.windows.data.collectionview.currentitem%28v=vs.110%29.aspx?f=255&MSPPError=-2147217396

I bind the rectangle to the current brush so when you select a different entry that changes. The listbox already has a lightblue background appears as you mouseover an item which highlights it somewhat. My trigger also increases the size of the ellipse a bit.

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

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

Ellipse as radio button

1 Answers1