uwp 'de bir font etkisine benzetme efektini simüle etme

Halihazırda bir hamburger menüsü içeren bir uwp projesi üzerinde çalışıyorum. Şimdiye kadar bu kodu gerçekten neyi elde etmek fare simgesinin üzerine geldiğinde, hamburger menüsünün arka plan rengini değiştirmek için beklendiğini nediruwp 'de bir font etkisine benzetme efektini simüle etme

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

kullanarak menü oluşturdu. Bu, bir windows uygulamasında küçültme düğmesine benzer. API'yi aradıktan sonra, herhangi bir mousehover olayı olmadığını fark ettim ve sanırım ona en yakın şeyin PointerEnetered olayı olduğunu düşünüyorum. Bunu XAML'deki PointerEntered olayı ile nasıl başarabilirim?

kaynak

2016-03-27 Tola

Bu Hamburger menüsünü kontrol edin [video] (https://www.youtube.com/watch?v=InVsajohErQ) yararlı olabilir. – Sender

gibi yapabilirsiniz FontIcon'un ön plan rengi, hamburger menüsünün arka plan rengini değiştirmek ve bir windows uygulamasındaki küçültme düğmesine benzer olmasını sağlamak için, FontIcon xaml'ı Button içeriğine eklemeye ve Button'un arka plan rengini değiştirmeye çalışabiliriz. Bunun gibi hamburger menüsünün arka plan rengini değiştirdik.

Fare hareketi olayını işlemek için, söylediğin gibi PointerEnetered olayını kullanmamız gerekiyor. Ancak, hamburger menüsünün arka plan rengini hamburger menüsünün üzerine getirmedikten sonra normale dönmesi için lütfen PointerExited etkinliğiyle uğraşmayı unutmayın.

fazla bilgi için, benim örnek kontrol edin:

XAML kodu:

<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 kodu:

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); 
    }

yalnızca XAML kullanarak uygulamak istiyorsanız, Düğme stilini düzenlemek ve Düğmenin Po içindeki arka plan rengini değiştirmek için Düğmeye sağ tıklayın Aşağıdaki şekilde VisualState interOver: tamamlanmış XAML kodu için

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

, kontrol edin:

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

sonucu:

teşekkür ederiz.

kaynak

2016-03-28 06:19:18

Güncelleştirme Bunu XAMl'de yapamazsınız. Eğer Düğme

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

Görsel durumunu yerine XAML kullanın düğmesini yapmak ve düzenlemek istiyorsanız Sen değiştirmek için @Archana tarafından gönderildi edilmiş çözümü ek olarak, bu

 <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); 
     }

kaynak

2016-03-28 05:06:44 Archana

uwp 'de bir font etkisine benzetme efektini simüle etme

cevap

İlgili konular