使条件样式更改不带触发

问题描述：

我想第一次使用AppBar，并且在理解如何做我想让AppBar在风格上做的事情时遇到一些困难。使条件样式更改不带触发

以下是我定义的一些数据模板，所以我可以在AppBar中的按钮上使用图标。我不喜欢股票AppBarButton，因为它将按钮和图标堆叠在一起。无论如何我都无法看到它们是水平堆叠的，所以我只是使用自定义按钮模板。

<DataTemplate x:Key="NewFolderIconTemplate"> 
    <Path Data="M10,4L12,6H20A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10M15,9V12H12V14H15V17H17V14H20V12H17V9H15Z" 
      Fill="Black" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Center" 
      Width="24" 
      Height="24" 
      Margin="0 0 10 0"/> 
</DataTemplate> 
<DataTemplate x:Key="RefreshIconTemplate"> 
    <Path Data="M19,12H22.32L17.37,16.95L12.42,12H16.97C17,10.46 16.42,8.93 15.24,7.75C12.9,5.41 9.1,5.41 6.76,7.75C4.42,10.09 4.42,13.9 6.76,16.24C8.6,18.08 11.36,18.47 13.58,17.41L15.05,18.88C12,20.69 8,20.29 5.34,17.65C2.22,14.53 2.23,9.47 5.35,6.35C8.5,3.22 13.53,3.21 16.66,6.34C18.22,7.9 19,9.95 19,12Z" 
      Fill="Black" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Center" 
      Width="24" 
      Height="24" 
      Margin="0 0 10 0"/> 
</DataTemplate> 
<DataTemplate x:Key="SortingIconTemplate"> 
    <Path Data="M9.25,5L12.5,1.75L15.75,5H9.25M15.75,19L12.5,22.25L9.25,19H15.75M8.89,14.3H6L5.28,17H2.91L6,7H9L12.13,17H9.67L8.89,14.3M6.33,12.68H8.56L7.93,10.56L7.67,9.59L7.42,8.63H7.39L7.17,9.6L6.93,10.58L6.33,12.68M13.05,17V15.74L17.8,8.97V8.91H13.5V7H20.73V8.34L16.09,15V15.08H20.8V17H13.05Z" 
      Fill="Black" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Center" 
      Width="24" 
      Height="24" 
      Margin="0 0 10 0"/> 
</DataTemplate>

接下来是实际的AppBar。我在垂直堆栈面板中放置了一系列按钮，并将堆栈面板放在应用程序栏中，以便可以获得垂直菜单效果。

<Page.TopAppBar> 
    <AppBar HorizontalAlignment="Right" 
      Background="Transparent"> 

     <AppBar.Resources> 
      <Style TargetType="Button" 
        x:Key="AppBarButton"> 
       <Setter Property="HorizontalAlignment" 
         Value="Stretch" /> 
       <Setter Property="Background" 
         Value="{ThemeResource ApplicationPageBackgroundThemeBrush}" /> 
       <Setter Property="HorizontalContentAlignment" 
         Value="Left" /> 
      </Style> 
     </AppBar.Resources> 

     <StackPanel HorizontalAlignment="Right"> 
      <Button Command="{Binding Path=RefreshDirectoryListCommand}" 
        Style="{StaticResource AppBarButton}"> 
       <StackPanel Orientation="Horizontal"> 
        <ContentControl ContentTemplate="{StaticResource RefreshIconTemplate}" 
            VerticalAlignment="Center" 
            Margin="0 0 10 0"/> 
        <TextBlock Text="Refresh" /> 
       </StackPanel> 
      </Button> 
      <Button Command="{Binding Path=CreateNewFolderCommand}" 
        Style="{StaticResource AppBarButton}"> 
       <StackPanel Orientation="Horizontal"> 
        <ContentControl ContentTemplate="{StaticResource NewFolderIconTemplate}" 
            VerticalAlignment="Center" 
            Margin="0 0 10 0"/> 
        <TextBlock Text="New Folder" /> 
       </StackPanel> 
      </Button> 
      <Button Command="{Binding Path=SortListCommand}" 
        Style="{StaticResource AppBarButton}"> 
       <StackPanel Orientation="Horizontal"> 
        <ContentControl ContentTemplate="{StaticResource SortingIconTemplate}" 
            VerticalAlignment="Center" 
            Margin="0 0 10 0"/> 
        <TextBlock Text="Sort" /> 
       </StackPanel> 
      </Button> 
     </StackPanel> 
    </AppBar> 
</Page.TopAppBar>

我试图解决这个问题。

AppBar的内容在应用程序栏旁边弹出，而不是在下面，就像下拉菜单一样。有没有办法配置ApPBar这样做，或者我必须设计自定义控件模板？

正如我鼠标移到他们，边界被渲染。 UWP应用程序似乎不再具有触发器，因此，更改鼠标移动的最佳方式是什么？我是否仍然可以通过造型来做到这一点，还是必须更换控制模板？

选择按钮内我AppBar导致按钮进入西米透明，允许内容它下面流血英寸什么是最好的方式风格呢？我想保持模糊的动画，并删除透明度：/

的AppBar本身有它的背景设置为白色，但是当我鼠标在它上面，背景是灰色的。我想这可以解决一旦我知道如何解决边界类似的问题和按钮上的透明度问题。

这似乎更像是我不知道如何正确地触发风格的东西缺失的问题。其他人通常会做什么来实现这些影响，构建自定义控件模板？如果是这样，Microsoft是否为原始模板提供了XAML，因此您不必从头开始100％？

开始=“3”>

答

是的，通常我们需要使用自定义控件模板来实现这些影响。微软为默认模板提供了XAML代码，您可以在Default control styles and templates找到它们。在Visual Studio中，打开文档大纲视图，选择要编辑的控件，然后右键单击，然后选择“编辑模板”选项，然后选择“编辑cpoy ...”。在此之后，您可以在您选择的地方看到默认模板。默认情况下，它位于您的<Page.Resources>中。这里我们需要AppBar和Button的模板。

是否有配置ApPBar到这样的行为方式，还是我要的风格的自定义控制模板？

在AppBar模板，我们可以看到下面的代码：
```
<Grid x:Name="ContentRoot" ... > 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    ... 
    <ContentControl x:Name="ContentControl" ... /> 
    <Button x:Name="ExpandButton" Grid.Column="1" ... > 
    ... 
<Grid> 
```
所以默认的AppBar显示在“ExpandButton”左边的内容。如果你想让它显示在“ExpandButton”下面，你需要完全重写它自己的模板。

UWP应用程序似乎没有触发器了，那么改变鼠标移过来的最好方法是什么？

在UWP我们使用VisualState的INSTEAD OF触发器来改变在不同的国家控制的视觉外观。而在Button的模板，它下面的代码：

<VisualState x:Name="PointerOver"> 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
      Storyboard.TargetProperty="BorderBrush"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
     Storyboard.TargetProperty="Foreground"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
    </Storyboard> 
</VisualState> 
<VisualState x:Name="Pressed"> 
    <Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
     Storyboard.TargetProperty="Background"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
     Storyboard.TargetProperty="BorderBrush"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
     Storyboard.TargetProperty="Foreground"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
     </ObjectAnimationUsingKeyFrames> 
     <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
    </Storyboard> 
</VisualState>

去除边缘时，鼠标悬停，我们可以从“PointerOver”VisualState删除

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
    Storyboard.TargetProperty="BorderBrush"> 
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" /> 
</ObjectAnimationUsingKeyFrames>

。

什么样的设计风格最好？我想保留模糊的动画，并删除透明度。

同样，我们可以改变

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" 
          Storyboard.TargetProperty="Background"> 
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
</ObjectAnimationUsingKeyFrames>

在“按下”VisualState删除透明度。

我想这可以解决一旦我知道如何解决边界类似问题和按钮上的透明度问题。

是的，这是按钮上的类似问题。该 “ExpandButton” 具有以下样式：

<Style x:Key="EllipsisButton" TargetType="Button"> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
    <Setter Property="BorderThickness" Value="0"/> 
    <Setter Property="Padding" Value="0,0,9,0"/> 
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Setter Property="HorizontalContentAlignment" Value="Right"/> 
    <Setter Property="VerticalAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Top"/> 
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
    <Setter Property="FontWeight" Value="SemiBold"/> 
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
    <Setter Property="Width" Value="{ThemeResource AppBarExpandButtonThemeWidth}"/> 
    <Setter Property="UseSystemFocusVisuals" Value="True"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="PointerOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
             <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

您还需要改变背景在“PointerOver”VisualState。但请注意，如果您的样式在<Page.Resources>中定义，则需要将此样式的关键字更改为“MyEllipsisButton”之类的其他字样，并且在AppBar的模板中，将此新样式设置为名为“EllipsisButton”的Button，或者AppBar仍将使用定义的“EllipsisButton”样式在系统的Generic.xaml中，你的自定义风格将不起作用。

使条件样式更改不带触发

相关推荐