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功能區按鈕鼠標移動時發光效果

回答

相關問題