2017-01-12 32 views
1

我想创建一个颜色选择器,看起来像在Windows油墨: enter image description hereUWP:如何创建一个“四舍五入”拾色器

所以我创建了一个的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_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中一样。

enter image description here

回答

2

你需要重写ItemContainerStyleGridViewItem。 看那GridViewItemExpanded风格Generic.xamlC:\ Program Files文件(x86)的\的Windows套件\ 10 \设计时\ CommonConfiguration \中性\ UAP \ 10.0.10240.0 \通用和改变RectangleEllipse。 并且不要忘记设置到您的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> 

enter image description here

+0

谢谢你们!这工作正常。 –

2

它比你想象。

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

选择并复制第二风格从这个页面(名为x:主要=“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"/> 
  • 随意编辑任何你想要 - 可能你需要对样式中设置的所有矩形进行相同操作。
  • 编辑:安德里克鲁普卡也较快;)