Цветовая палитра Используя GridView в UWP?

Question

Мне нужна цветовая палитра, похожая на эту. Я не знаю, как писать код.

Answer 1

Вы можете создать ViewModel, который содержит свойство Color, затем получить список Color, который вы хотите показать, и связать список с GridView, создавая Ellipse в каждом GridViewItem, чтобы показать другой цвет. Ниже в качестве примера я использую системный список цветов.

.xaml:

<GridView x:Name="colorList2" Width="400" Height="600" Background="LightGray" ItemsSource="{x:Bind Colors,Mode=OneWay}">
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="Margin" Value="10"/>
        </Style>
    </GridView.ItemContainerStyle>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Ellipse Fill="{Binding Color}" Height="60" Width="60"/>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

.cs:

public class MyColor
{
    public SolidColorBrush Color { get; set; }
}

public sealed partial class BlankPage1 : Page
{
    public BlankPage1()
    {
        this.InitializeComponent();
        Colors = new ObservableCollection<MyColor>();

        foreach (var color in typeof(Colors).GetRuntimeProperties())
        {
            Colors.Add(new MyColor() { Color = new SolidColorBrush((Color)color.GetValue(null)) });
        }
    }

    public ObservableCollection<MyColor> Colors { get; set; }
}

Обновление:

Если вы хотите изменить границу выделенного элемента на черный, вам нужно изменить переопределение ItemContainerStyle для вашего GridViewItem. Вы можете go до generi c .xaml , чтобы скопировать стиль GridViewItemExpanded , который применялся для GridViewItem. В стиле GridViewItemExpanded имеется прямоугольник с именем BorderRectangle , представляющий границу, вам просто нужно изменить его свойство Stroke в различных визуальных состояниях.

Использование:

<GridView ItemContainerStyle="{StaticResource MyRoundItem2}">
......

Стиль:

<Page.Resources>
    <Style TargetType="GridViewItem" x:Key="MyRoundItem">
        ......
        <Setter Property="Margin" Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <Grid x:Name="ContentBorder"
          Control.IsTemplateFocusTarget="True"
          FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}"
          CornerRadius="{TemplateBinding CornerRadius}"
          RenderTransformOrigin="0.5,0.5">
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="ContentBorderScale" />
                        </Grid.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BorderRectangle"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BorderRectangle"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <DoubleAnimation Storyboard.TargetName="BorderRectangle"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOverSelected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <DoubleAnimation Storyboard.TargetName="BorderRectangle"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PressedSelected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <DoubleAnimation Storyboard.TargetName="BorderRectangle"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="FocusVisualSecondaryThickness">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />

                                <VisualState x:Name="Disabled">

                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="MultiSelectStates">
                                <VisualState x:Name="MultiSelectDisabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.333" Value="Collapsed" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <FadeOutThemeAnimation TargetName="MultiSelectSquare" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultiSelectEnabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <FadeInThemeAnimation TargetName="MultiSelectSquare" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DataVirtualizationStates">
                                <VisualState x:Name="DataAvailable" />
                                <VisualState x:Name="DataPlaceholder">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ReorderHintStates">
                                <VisualState x:Name="NoReorderHint" />
                                <VisualState x:Name="BottomReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" Direction="Bottom" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TopReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" Direction="Top" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="RightReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" Direction="Right" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="LeftReorderHint">
                                    <Storyboard>
                                        <DragOverThemeAnimation TargetName="ContentBorder" ToOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" Direction="Left" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DragStates">
                                <VisualState x:Name="NotDragging" />
                                <VisualState x:Name="Dragging">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <DragItemThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DraggingTarget" />
                                <VisualState x:Name="MultipleDraggingPrimary">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayTextBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectSquare"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="0" />
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="0" />
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayTextBorder" />
                                        <DragItemThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingSecondary" />
                                <VisualState x:Name="DraggedPlaceholder" />
                                <VisualState x:Name="Reordering">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0:0:0.240"
                    To="{ThemeResource ListViewItemReorderThemeOpacity}" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ReorderingTarget">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0:0:0.240"
                    To="{ThemeResource ListViewItemReorderTargetThemeOpacity}" />
                                        <DoubleAnimation Storyboard.TargetName="ContentBorderScale"
                    Storyboard.TargetProperty="ScaleX"
                    Duration="0:0:0.240"
                    To="{ThemeResource ListViewItemReorderTargetThemeScale}" />
                                        <DoubleAnimation Storyboard.TargetName="ContentBorderScale"
                    Storyboard.TargetProperty="ScaleY"
                    Duration="0:0:0.240"
                    To="{ThemeResource ListViewItemReorderTargetThemeScale}" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleReorderingPrimary">
                                    <Storyboard>
                                        <!-- These two Opacity animations are required - the FadeInThemeAnimations
                                         on the same elements animate an internal Opacity. -->
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayTextBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="1" />
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectSquare"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="0" />
                                        <DoubleAnimation Storyboard.TargetName="MultiSelectCheck"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0"
                    To="0" />
                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                    Storyboard.TargetProperty="Opacity"
                    Duration="0:0:0.240"
                    To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayTextBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ReorderedPlaceholder">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DragOver">
                                    <Storyboard>
                                        <DropTargetItemThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2" />
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        ......
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>