スタイル

丸いボタンのスタイル †

[edit]

<Style x:Key="RoundCloseButton" TargetType="Button">
           <Setter Property="HorizontalAlignment" Value="Center"/>
           <Setter Property="VerticalAlignment" Value="Center"/>
           <Setter Property="Width" Value="25"/>
           <Setter Property="Height" Value="30"/>
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate>
                       <Grid>
                           <vsm:VisualStateManager.VisualStateGroups>
                               <vsm:VisualStateGroup x:Name="CommonStates">
                                   <vsm:VisualState x:Name="Normal"/>
                                   <vsm:VisualState x:Name="MouseOver">
                                       <Storyboard>
                                           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
                                               <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
                                           </DoubleAnimationUsingKeyFrames>
                                       </Storyboard>
                                   </vsm:VisualState>
                               </vsm:VisualStateGroup>
                           </vsm:VisualStateManager.VisualStateGroups>

                           <Border Width="22"  x:Name="glow" Height="22" CornerRadius="15" ToolTipService.ToolTip="Sulge (Esc)">
                               <TextBlock Foreground="#222" TextAlignment="center" Text="r" FontSize="11" VerticalAlignment="center" FontFamily="Webdings"/>
                               <Border.Background>
                                   <RadialGradientBrush GradientOrigin=".3, .3">
                                       <GradientStop Color="#FFF" Offset=".15"/>
                                       <GradientStop Color="DarkRed" Offset="1"/>
                                   </RadialGradientBrush>
                               </Border.Background>
                           </Border>
                       </Grid>
                   </ControlTemplate> 
               </Setter.Value>
           </Setter> 
       </Style>

コメント：

お名前:

(画像の文字列を入力して下さい)