【问题标题】:UWP: how to create a "rounded" color pickerUWP:如何创建“圆形”颜色选择器
【发布时间】:2017-01-12 17:00:24
【问题描述】:

我想创建一个类似于 Windows Ink 的颜色选择器:

所以我创建了一个 GridView,其中包含我的 ItemTemplate

<GridView x:Name="colorList2" HorizontalAlignment="Stretch" VerticalAlignment="Top" 
        IsItemClickEnabled="True" 
        ItemClick="colorList2_ItemClick" 
        SelectionMode="Single"
        SelectionChanged="colorList2_SelectionChanged"
        >
<GridView.ItemTemplate>
    <DataTemplate>
        <Grid RightTapped="Grid_RightTapped" Tapped="Grid_Tapped">
            <Button  Height="30" Width="30">
                <Button.Template>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Fill="{Binding Color}"/>
                            <ContentPresenter Content="{TemplateBinding Content}" 
                                                HorizontalAlignment="Center" 
                                                VerticalAlignment="Center"/>
                        </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>
    </DataTemplate>
</GridView.ItemTemplate>

在 Grid_RightTapped 和 Grid_Tappen 事件中,我获得了被点击的颜色,我为我的项目着色,我将所选项目影响到 GridView:

private void Grid_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Colors selectedColor = (sender as Grid).DataContext as Colors;
        foreach (NodeViewModel node in diagram.Nodes as DiagramCollection<NodeViewModel>)
        {  
            ...
        }
        this.colorList2.SelectedItem = selectedColor;
    }
}

这很好,但我想知道是否有办法“自定义”GridView 的选定/悬停项目的模板? 这些是正方形,我想用椭圆代替它们,就像在 Windows Ink 中一样。

【问题讨论】:

  • 能否上传完整代码?
  • DataTemplete 中的 (Binding Color) 和 (TempleteBinding Content) 是什么?

标签: xaml gridview uwp datatemplate ellipse


【解决方案1】:

您需要为您的GridViewItem 覆盖ItemContainerStyle。 查看 C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\GenericGeneric.xaml 中的 GridViewItemExpanded 样式/em> 并将Rectangle 更改为Ellipse。 并且不要忘记设置到您的GridView。 例如:

<GridView>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <!--Apply new data-->
        </Style>
    </GridView.ItemContainerStyle>
</GridView>

正确的样式是:

<GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,2,12,12"/>
        <Setter Property="MinWidth" Value="0"/>
        <Setter Property="MinHeight" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <Grid x:Name="ContentBorder"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <VisualStateManager.VisualStateGroups>
                            <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="FocusVisualBlack" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                        </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="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                        </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="{ThemeResource SystemControlHighlightAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                        </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="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                        </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="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Stroke">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                        </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="FocusStates">
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1"/>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1"/>
                                    </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"/>
                            </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">
                                    <Storyboard>
                                        <DropTargetItemThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingPrimary">
                                    <Storyboard>
                                        <!-- These two Opacity animations are required - the FadeInThemeAnimations
                                    on the same elements animate an internal Opacity. -->
                                        <DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="1" />

                                        <DoubleAnimation Storyboard.TargetName="ContentBorder"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0"
                                                To="{ThemeResource ListViewItemDragThemeOpacity}" />
                                        <FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
                                        <DragItemThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MultipleDraggingSecondary">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DraggedPlaceholder">
                                    <Storyboard>
                                        <FadeOutThemeAnimation TargetName="ContentBorder" />
                                    </Storyboard>
                                </VisualState>
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
                                </VisualStateGroup.Transitions>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

                        <Ellipse x:Name="MultiArrangeOverlayBackground"
                                IsHitTestVisible="False"
                                Opacity="0"
                                Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                                Grid.ColumnSpan="2"/>
                        <Ellipse x:Name="BorderRectangle"
                                 Margin="-2"
                                 IsHitTestVisible="False"
                                 Stroke="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                                 StrokeThickness="3"
                                 Opacity="0"/>
                        <Border x:Name="MultiSelectSquare"
                                Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
                                Width="20"
                                Height="20"
                                Margin="0,2,2,0"
                                VerticalAlignment="Top"
                                HorizontalAlignment="Right"
                                Visibility="Collapsed" >
                            <FontIcon x:Name="MultiSelectCheck" 
                                      FontFamily="{ThemeResource SymbolThemeFontFamily}" 
                                      Glyph="&#xE73E;" 
                                      FontSize="16" 
                                      Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                                      Opacity="0"/>
                        </Border>
                        <Ellipse x:Name="FocusVisualWhite"
                        IsHitTestVisible="False"
                        Stroke="{ThemeResource SystemControlForegroundAltHighBrush}"
                        StrokeEndLineCap="Square"
                        StrokeDashArray="1.0, 1.0"
                        StrokeDashOffset="1.5"
                        StrokeThickness="2"
                        Opacity="0"/>
                        <Ellipse x:Name="FocusVisualBlack"
                        IsHitTestVisible="False"
                        Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}"
                        StrokeEndLineCap="Square"
                        StrokeDashArray="1.0, 1.0"
                        StrokeDashOffset="0.5"
                        StrokeThickness="2"
                        Opacity="0"/>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</GridView.ItemContainerStyle>

【讨论】:

    【解决方案2】:

    这比你想象的要容易。

    转到https://msdn.microsoft.com/en-us/library/windows/apps/mt299122.aspx找到“GridViewItem 样式和模板”类别并输入。

    从此页面中选择并复制第二个样式(名为 x:Key="GridViewItemExpanded")

    将其粘贴到您的部分。

    编辑您喜欢的方式并将您的 GridView 设置为 ItemContainerTemplate。

    要得到椭圆而不是矩形,你只需要替换它 部分

    <Rectangle x:Name="BorderRectangle" IsHitTestVisible="False"
                      Stroke="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                      StrokeThickness="2"
                      Opacity="0"/>  
    

    用这个:

     <Ellipse x:Name="BorderRectangle" IsHitTestVisible="False"
                      Stroke="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                      StrokeThickness="2"
                      Opacity="0"/>
    
    1. 随意编辑您想要的任何内容 - 可能您需要对样式中设置的所有矩形执行相同操作。

    编辑:Andrii Krupka 更快 ;)

    【讨论】:

      【解决方案3】:

      我已经使用基本 XAML 控件实现了类似的功能。把它留在这里,以防有人发现它有用。

      <RadioButton GroupName="HighilghterColors" x:Name="btn_GreenHighliter" IsChecked="True" MinWidth="40" Tag="green_highlighter">
          <RadioButton.Template>
              <ControlTemplate>
                  <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" Padding="0" CornerRadius="50">
                      <ToggleButton.Content>
                          <Ellipse Fill="LawnGreen" Width="29" Height="29"/>
                      </ToggleButton.Content>
                   </ToggleButton>
               </ControlTemplate>
           </RadioButton.Template>
      </RadioButton>
      

      【讨论】:

        猜你喜欢
        • 2022-01-21
        • 1970-01-01
        • 2019-12-21
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-09-28
        • 2021-09-26
        • 1970-01-01
        相关资源
        最近更新 更多