Моделирование эффекта mousehover на шрифтеIcon в uwp

В настоящее время я работаю над проектом uwp, в котором используется меню гамбургеров. До сих пор я создал меню с помощью этого кодаМоделирование эффекта mousehover на шрифтеIcon в uwp

<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" 
         Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0">

Что я на самом деле, что для достижения в том, что при наведении указателя мыши на значок, цвет фона меню гамбургер, как ожидается, изменится. Это похоже на кнопку «Свернуть» в приложении Windows. После поиска API я понял, что не было никакого события mousehover, и я думаю, что самое близкое ему было событие PointerEnetered. Как достичь этого с помощью события PointerEntered в XAML?

источник

2016-03-27 Tola

Проверьте это меню гамбургера [видео] (https://www.youtube.com/watch?v=InVsajohErQ), возможно, мне это поможет. – Sender

В дополнение к решению, которое было разместил @Archana изменить цвет фона FontIcon, чтобы изменить цвет фона меню гамбургера и позволить ему быть похожим на кнопку «Свернуть» в приложении Windows, мы можем попытаться добавить FontIcon xaml в контент Button и изменить цвет фона Button, чтобы он выглядел мы изменили цвет фона меню гамбургера.

Для обработки события mousehover, как вы сказали, нам нужно использовать событие PointerEnetered. Но, пожалуйста, не забудьте обработать событие PointerExited, чтобы цвет фона меню гамбургера возвращался в нормальное состояние после того, как мы не наводим указатель мыши на меню гамбургера.

Для получения дополнительной информации, пожалуйста, проверьте мой образец:

XAML код:

<SplitView.Pane> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <StackPanel Grid.Row="0" Height="auto"> 
        <Button BorderThickness="0" Background="Transparent" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"> 
         <Button.Content> 
          <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" 
        Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0"/> 
         </Button.Content> 
        </Button> 
       </StackPanel> 
       <StackPanel Grid.Row="1"> 
       //add other icon 
       </StackPanel> 
      </Grid> 
     </SplitView.Pane>

CS код:

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e) 
    { 
     Button test = sender as Button; 
     test.Background = new SolidColorBrush(Colors.Red); 
    } 

    private void Button_PointerExited(object sender, PointerRoutedEventArgs e) 
    { 
     Button test = sender as Button; 
     test.Background = new SolidColorBrush(Colors.Transparent); 
    }

Если вы хотите реализовать его с помощью XAML, щелкните правой кнопкой мыши кнопку, чтобы изменить стиль кнопки и измените цвет фона кнопки внутри поля Po interOver VisualState следующим образом:

<VisualState x:Name="PointerOver"> 
      <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/> 
        </ObjectAnimationUsingKeyFrames> 
                      </Storyboard> 
</VisualState>

Для законченного кода XAML, пожалуйста, проверьте:

<Page.Resources> 
    <Style x:Key="ButtonStyle1" TargetType="Button"> 
     <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
     <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/> 
     <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
     <Setter Property="Padding" Value="8,4,8,4"/> 
     <Setter Property="HorizontalAlignment" Value="Left"/> 
     <Setter Property="VerticalAlignment" Value="Center"/> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
     <Setter Property="FontWeight" Value="Normal"/> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
     <Setter Property="UseSystemFocusVisuals" Value="True"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <SplitView.Pane> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="Auto"/> 
        <RowDefinition Height="*"/> 
       </Grid.RowDefinitions> 
       <StackPanel Grid.Row="0" Height="auto"> 
        <Button BorderThickness="0" Background="Transparent" Style="{StaticResource ButtonStyle1}" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"> 
         <Button.Content> 
          <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" 
        Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0"/> 
         </Button.Content> 
        </Button> 
       </StackPanel> 
       <StackPanel Grid.Row="1"> 
       //add other icon 
       </StackPanel> 
      </Grid> 
     </SplitView.Pane> 

    </Grid> 
</Grid>

Результат:

Спасибо.

источник

2016-03-28 06:19:18

Обновление Вы не можете сделать это в XAMl. Если вы хотите сделать в кнопке XAML Используйте вместо этого и редактировать Визуальная состояние кнопки

<Button Foreground="Black" Style="{StaticResource ButtonStyle1}"> 
       <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" 
    VerticalAlignment="Center" Margin="12,0,8,0"/> 
      </Button> 

<Style x:Key="ButtonStyle1" TargetType="Button"> 
      <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
      <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
      <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/> 
      <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
      <Setter Property="Padding" Value="8,4,8,4"/> 
      <Setter Property="HorizontalAlignment" Value="Left"/> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
      <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
      <Setter Property="FontWeight" Value="Normal"/> 
      <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
      <Setter Property="UseSystemFocusVisuals" Value="True"/> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Normal"> 
             <Storyboard> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="PointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="White"/> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Disabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>

Вы можете сделать как этот

 <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" PointerPressed="FontIcon_PointerPressed" PointerEntered="FontIcon_PointerEntered" 
    PointerExited="FontIcon_PointerExited" Foreground="Black" VerticalAlignment="Center" Margin="12,0,8,0"/> 

    private void FontIcon_PointerPressed(object sender, PointerRoutedEventArgs e) 
     { 
      (sender as FontIcon).Foreground = new SolidColorBrush(Colors.White); 
     } 

     private void FontIcon_PointerEntered(object sender, PointerRoutedEventArgs e) 
     { 
      (sender as FontIcon).Foreground = new SolidColorBrush(Colors.White); 
     } 

     private void FontIcon_PointerExited(object sender, PointerRoutedEventArgs e) 
     { 
      (sender as FontIcon).Foreground = new SolidColorBrush(Colors.Black); 
     }

источник

2016-03-28 05:06:44 Archana

Моделирование эффекта mousehover на шрифтеIcon в uwp

ответ

Смежные вопросы