Question

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

所以我创建了一个包含 ItemTemplate 的 GridView ：

<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_Tappent事件中，我获得了单击的颜色，我将项目着色，并且我将所选项目影响到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中一样。

Answer 1

您需要覆盖var assemblyVersion = System.Reflection.Assembly.GetExecutingAssembly() .GetName() .Version .ToString();的{{1}}。查看 C：\ Program Files（x86）\ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \ Neutral \ UAP \ 10.0.10240.0 \中 Generic.xaml 中的ItemContainerStyle样式通用并将GridViewItem更改为GridViewItemExpanded。不要忘记设置到Rectangle。例如：

Ellipse

正确的风格是：

GridView

Answer 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"/>

随意编辑您想要的任何内容 - 可能您需要对样式中设置的所有矩形执行相同的操作。

编辑：Andrii Krupka更快;）

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

UWP：如何创建“圆形”颜色选择器

3 个答案: