WPF功能区按钮鼠标移动时发光效果

我试图在悬停时创建带有发光效果的功能区菜单。在WPF Ribbon Button中可以吗？像这样http://tympanus.net/Development/IconHoverEffects/#set-8 WPF功能区按钮鼠标移动时发光效果

如果是的话是否有人知道如何？谢谢。

这是我到目前为止。

<pbwpf:Window.Resources> 
    <Style TargetType="{x:Type my:Ribbon}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type my:Ribbon}"> 
        <StackPanel Orientation="Vertical" Height="750" Background="#171f22"> 
         <my:RibbonButton Name="rb_edit" Label="Edit" Margin="0,20,0,0"> 
          <Button.Template> 
           <ControlTemplate> 
            <Border VerticalAlignment="Center" HorizontalAlignment="Center"> 
             <Image Source="Images/rb_add4.png" Width="43" Height="43" /> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </my:RibbonButton> 
         <my:RibbonButton Name="rb_save" Label="Save" Margin="0,20,0,0"> 
          <Button.Template> 
           <ControlTemplate> 
            <Border VerticalAlignment="Center" HorizontalAlignment="Center"> 
             <Image Source="Images/rb_add4.png" Width="43" Height="43" /> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </my:RibbonButton> 
         <my:RibbonButton Name="rb_abort" Label="Abort" Margin="0,20,0,0"> 
          <Button.Template> 
           <ControlTemplate> 
            <Border VerticalAlignment="Center" HorizontalAlignment="Center"> 
             <Image Source="Images/rb_add4.png" Width="43" Height="43"></Image> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </my:RibbonButton> 
         <my:RibbonButton Name="rb_delete" Label="Delete" Margin="0,20,0,0"> 
          <Button.Template> 
           <ControlTemplate> 
            <Border VerticalAlignment="Center" HorizontalAlignment="Center"> 
             <Image Source="Images/rb_add4.png" Width="43" Height="43"></Image> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </my:RibbonButton> 
         <my:RibbonButton Name="rb_search" Label="Search" Margin="0,20,0,0"> 
          <Button.Template> 
           <ControlTemplate> 
            <Border VerticalAlignment="Center" HorizontalAlignment="Center"> 
             <Image Source="Images/rb_add4.png" Width="43" Height="43"></Image> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </my:RibbonButton> 
         <my:RibbonButton Name="rb_print" Label="Print" Margin="0,20,0,0"> 
          <Button.Template> 
           <ControlTemplate> 
            <Border VerticalAlignment="Center" HorizontalAlignment="Center"> 
             <Image Source="Images/rb_add4.png" Width="43" Height="43"></Image> 
            </Border> 
           </ControlTemplate> 
          </Button.Template> 
         </my:RibbonButton> 
        </StackPanel> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style TargetType="Label"> 
     <Setter Property="FontFamily" Value="Lubalin" /> 
     <Setter Property="Foreground" Value="#338e8f" /> 
     <Setter Property="FontSize" Value="18" /> 
     <!--<Setter Property="Opacity" Value="0.2" />--> 
    </Style> 
</pbwpf:Window.Resources> 
<Grid> 
    <Border BorderBrush="#9ac3cb" BorderThickness="1"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="55" /> 
       <RowDefinition Height="745" /> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="55" /> 
       <ColumnDefinition Width="969" /> 
      </Grid.ColumnDefinitions> 
      <Border Name="bms" Grid.Row="0" Grid.Column="0" Background="#3fb5af"> 
       <Label Name="lbl_bms" Content="BMS " VerticalAlignment="Center" HorizontalAlignment="Center" /> 
      </Border> 
      <Border Name="header" Grid.Row="0" Grid.Column="1" Background="#ecf0f1" BorderBrush="Gray" BorderThickness="0,0,0,1"></Border> 
      <Border Name="btn_clse" Grid.Row="0" Grid.Column="1" Background="#ecf0f1" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="0,0,0,1"> 
       <Image Source="Images/c_lose.png" Height="40" Width="40"></Image> 
      </Border> 
      <pbwpf:StaticText Grid.Row="0" Grid.Column="1" Height="21" HorizontalAlignment="Left" Margin="10,20,0,0" Name="st_dte" Text="Main Form" TextSize="-10" VerticalAlignment="Top" Width="88" PBHeight="84" PBWidth="402" X="46" Y="80" /> 
      <Border Name="sidebar" Grid.Row="1" Grid.Column="0" Background="#171e24"> 
       <StackPanel VerticalAlignment="Top" Orientation="Vertical" HorizontalAlignment="Left"> 
        <my:Ribbon Height="745" Name="ribbon1" TabIndex="10" Width="55"> 
         <my:Ribbon.ApplicationMenu> 
          <my:RibbonApplicationMenu Visibility="Collapsed" /> 
         </my:Ribbon.ApplicationMenu> 
        </my:Ribbon> 
       </StackPanel> 
      </Border> 
      <Border Grid.Row="1" Grid.Column="1"> 
       <!--<pbwpf:MDIClient Name="mdi1" Background="white"></pbwpf:MDIClient>--> 
      </Border> 
     </Grid> 
    </Border> 
</Grid>

下面是我想要实现的样式的屏幕截图。

screenshot

来源

2014-09-02 x' tian

我试图通过WPF复制从问题中提及的链接悬停动画

这里是相同的使用样式工作示例，触发&动画

<StackPanel Orientation="Horizontal" 
      Background="#3851bc"> 
    <StackPanel.Resources> 
     <Style TargetType="Button"> 
      <Setter Property="Margin" 
        Value="20" /> 
      <Setter Property="Foreground" 
        Value="White" /> 
      <Setter Property="FontSize" 
        Value="20" /> 
      <Setter Property="FontWeight" 
        Value="SemiBold" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="Button"> 
         <Border Background="Transparent" 
           Width="100" 
           Height="100" 
           CornerRadius="50"> 
          <Grid> 
           <Border Background="#22ffffff" 
             CornerRadius="50" 
             x:Name="content"> 
            <ContentPresenter HorizontalAlignment="Center" 
                 VerticalAlignment="Center" 
                 Margin="0,-2,0,0" /> 
           </Border> 
           <Ellipse x:Name="ring" 
             StrokeThickness="15" 
             Opacity="0" 
             IsHitTestVisible="False"> 
            <Ellipse.Stroke> 
             <RadialGradientBrush> 
              <GradientStop Color="Transparent" 
                  Offset="0.83" /> 
              <GradientStop Color="#55ffffff" 
                  Offset="0.84" /> 
              <GradientStop Color="Transparent" 
                  Offset="0.85" /> 
              <GradientStop Color="Transparent" 
                  Offset=".93" /> 
              <GradientStop Color="#55ffffff" 
                  Offset=".97" /> 
              <GradientStop Color="#55ffffff" 
                  Offset="1" /> 
             </RadialGradientBrush> 
            </Ellipse.Stroke> 
            <Ellipse.RenderTransform> 
             <ScaleTransform CenterX="50" 
                 CenterY="50" 
                 x:Name="ringScale" /> 
            </Ellipse.RenderTransform> 
           </Ellipse> 
          </Grid> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" 
            Value="true"> 
           <Setter TargetName="content" 
             Property="RenderTransform"> 
            <Setter.Value> 
             <ScaleTransform CenterX="50" 
                 CenterY="50" 
                 ScaleX=".9" 
                 ScaleY=".9" /> 
            </Setter.Value> 
           </Setter> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard Duration="0:0:2"> 
              <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                  Storyboard.TargetName="ring" 
                  To="1" 
                  Duration="0:0:0" /> 
              <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                  Storyboard.TargetName="ring" 
                  From="1" 
                  To="0" /> 
              <DoubleAnimation Storyboard.TargetProperty="ScaleX" 
                  Storyboard.TargetName="ringScale" 
                  From="1" 
                  To="1.5" /> 
              <DoubleAnimation Storyboard.TargetProperty="ScaleY" 
                  Storyboard.TargetName="ringScale" 
                  From="1" 
                  To="1.5" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </StackPanel.Resources> 
    <Button Content="A" /> 
    <Button Content="B" /> 
    <Button Content="C" /> 
    <Button Content="D" /> 
    <Button Content="E" /> 
    <Button Content="F" /> 
</StackPanel>

结果

result

上面的示例基于标准Button，但它适用于WPF中的任何控件。由于我没有WPF Ribbon Button所以我不能尝试相同的。您可以根据需要调整模板/动画。

RibbonButton例如

<Ribbon> 
    <Ribbon.Resources> 
     <Style TargetType="RibbonButton"> 
      <Style.Resources> 
       <sys:Double x:Key="buttonSize">40</sys:Double> 
       <CornerRadius x:Key="buttonRadius">20</CornerRadius> 
       <sys:Double x:Key="scaleOffset">20</sys:Double> 
      </Style.Resources> 
      <Setter Property="Margin" 
        Value="10" /> 
      <Setter Property="Foreground" 
        Value="White" /> 
      <Setter Property="FontSize" 
        Value="20" /> 
      <Setter Property="FontWeight" 
        Value="SemiBold" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="RibbonButton"> 
         <Border Background="Transparent" 
           Width="{StaticResource buttonSize}" 
           Height="{StaticResource buttonSize}" 
           CornerRadius="10"> 
          <Grid> 
           <Border Background="#22ffffff" 
             CornerRadius="{StaticResource buttonRadius}" 
             x:Name="content"> 
            <ContentPresenter HorizontalAlignment="Center" 
                 VerticalAlignment="Center" 
                 Margin="0,-2,0,0" 
                 ContentSource="Label" /> 
           </Border> 
           <Ellipse x:Name="ring" 
             StrokeThickness="15" 
             Opacity="0" 
             IsHitTestVisible="False"> 
            <Ellipse.Stroke> 
             <RadialGradientBrush> 
              <GradientStop Color="Transparent" 
                  Offset="0.83" /> 
              <GradientStop Color="#55ffffff" 
                  Offset="0.84" /> 
              <GradientStop Color="Transparent" 
                  Offset="0.85" /> 
              <GradientStop Color="Transparent" 
                  Offset=".93" /> 
              <GradientStop Color="#55ffffff" 
                  Offset=".97" /> 
              <GradientStop Color="#55ffffff" 
                  Offset="1" /> 
             </RadialGradientBrush> 
            </Ellipse.Stroke> 
            <Ellipse.RenderTransform> 
             <ScaleTransform CenterX="{StaticResource scaleOffset}" 
                 CenterY="{StaticResource scaleOffset}" 
                 x:Name="ringScale" /> 
            </Ellipse.RenderTransform> 
           </Ellipse> 
          </Grid> 
         </Border> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" 
            Value="true"> 
           <Setter TargetName="content" 
             Property="RenderTransform"> 
            <Setter.Value> 
             <ScaleTransform CenterX="{StaticResource scaleOffset}" 
                 CenterY="{StaticResource scaleOffset}" 
                 ScaleX=".9" 
                 ScaleY=".9" /> 
            </Setter.Value> 
           </Setter> 
           <Trigger.EnterActions> 
            <BeginStoryboard> 
             <Storyboard Duration="0:0:2"> 
              <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                  Storyboard.TargetName="ring" 
                  To="1" 
                  Duration="0:0:0" /> 
              <DoubleAnimation Storyboard.TargetProperty="Opacity" 
                  Storyboard.TargetName="ring" 
                  From="1" 
                  To="0" /> 
              <DoubleAnimation Storyboard.TargetProperty="ScaleX" 
                  Storyboard.TargetName="ringScale" 
                  From="1" 
                  To="1.5" /> 
              <DoubleAnimation Storyboard.TargetProperty="ScaleY" 
                  Storyboard.TargetName="ringScale" 
                  From="1" 
                  To="1.5" /> 
             </Storyboard> 
            </BeginStoryboard> 
           </Trigger.EnterActions> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Ribbon.Resources> 
    <RibbonTab Header="File"> 
     <RibbonGroup Header="Group" 
        Background="#3851bc" 
        Width="auto"> 
      <RibbonButton Label="A" /> 
      <RibbonButton Label="B" /> 
      <RibbonButton Label="C" /> 
      <RibbonButton Label="D" /> 
      <RibbonButton Label="E" /> 
      <RibbonButton Label="F" /> 
     </RibbonGroup> 
    </RibbonTab> 
</Ribbon>

结果

result

以上只是你可以按照你的需要调整的例子

0123在按钮

显示图像

到分开看其他内容从标签

变化模板中的以下

<ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center" 
         Margin="0,-2,0,0" 
         ContentSource="Label" />

到

<ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center" 
         Margin="5"/>

我简单地除去ContentSource="Label"所以它会使用content属性来显示th E含量并设置Margin="5"从边境

保持图像的远

现在应用图像

变化

<RibbonButton Label="B" />

到

<RibbonButton> 
     <Image Source="image.jpg" /> 
    </RibbonButton>

所以图像现在设置为按钮内容和模板将相应地显示它，您可以将任何内容设置为愿望，它可以是文本，图像或您可能需要的任何其他元素。

来源

2014-09-02 09:16:50 pushpraj

嗨@pushpraj谢谢你！这是我正在寻找的。你太好了！！非常感谢你。我会将此标记为答案！再次感谢。 – 2014-09-03 07:44:32

嗨！另一个问题。 WPF Ribbon中可能会产生效果吗？谢谢！ – 2014-09-03 07:57:02

是的，这确实是可能的。你可以给我一个链接到你正在使用的图书馆，我可以试一试。同时，您可以将样式的目标类型更改为功能区按钮，并查看是否符合要求，您可以根据需要调整模板。 – pushpraj 2014-09-03 11:51:31

WPF功能区按钮鼠标移动时发光效果

回答

相关问题