原文: 潛移默化學會WPF(絢麗篇)--熱烈歡迎RadioButton,改造成功,改造成ImageButton,新版導航
本樣式 含有 觸發器 和 動畫 模闆 ,多條件觸發器,還有布局
本人部落格園位址
http://www.cnblogs.com/Fresh-Air/ 前台樣式 ,我精心設計的<Style x:Key="RDOButton" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="bd">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FFAFAFAF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Storyboard2">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="bd">
<EasingColorKeyFrame KeyTime="0" Value="#FFAFAFAF"/>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="#D3D3D3"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<BulletDecorator Background="Transparent">
<Border x:Name="bd" HorizontalAlignment="Center" Background="White" CornerRadius="5">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.OpacityMask>
<ContentPresenter Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="bd" Property="Background" Value="gray" />
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter TargetName="bd" Property="Background" Value="{x:Null}" />
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Trigger.EnterActions>
<BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/>
</Trigger.EnterActions>
<Setter TargetName="bd" Property="Background" Value="#FF606060" />
</Trigger>
<MultiTrigger>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="bd" Property="Background" Value="Red" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
調用,例如
如下:特帥
單用就是radiobutton
<RadioButton Width="80" Height="70" Margin="2,5" Cursor="Hand" Name="yingyetingToolBarButton" VerticalAlignment="Top" Click="YingyetingToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/yingyeting.png"/>
<TextBlock><Run Text="營業廳"/></TextBlock>
</StackPanel>
</RadioButton>
這樣就是一個toolbar了,自定義的
<StackPanel Height="80" Orientation="Horizontal" Focusable="True">
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF727272" Offset="1" />
<GradientStop Color="#FFFFFF" Offset="0.654" />
<GradientStop Color="#FEFEFE" Offset="0" />
<GradientStop Color="#FFFFFFFB" Offset="0.994" />
</LinearGradientBrush>
</StackPanel.Background>
<RadioButton Width="80" Height="70" Margin="2,5" Cursor="Hand" Name="yingyetingToolBarButton" VerticalAlignment="Top" Click="YingyetingToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/yingyeting.png"/>
<TextBlock><Run Text="營業廳"/></TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="80" Height="70" Margin="2,5" Cursor="Hand" Name="yingyechaxunToolBarButton" VerticalAlignment="Top" Click="YingyetingToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/yingyechaxun.png"/>
<TextBlock><Run Text="營業查詢"/></TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="80" Height="70" Margin="2,5" Cursor="Hand" Name="jiaojiebanToolBarButton" VerticalAlignment="Top" Click="JiaojiebanToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/jiaojieban.png"/>
<TextBlock><Run Text="交接班"/></TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="80" Height="70" Cursor="Hand" Margin="2,5" Name="caipinshezhiToolBarButton" VerticalAlignment="Top" Click="CaipinshezhiToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/caipinshezhi.png"/>
<TextBlock><Run Text="菜品設定"/></TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="80" Height="70" Cursor="Hand" Margin="2,5" Name="tingshishezhiToolBarButton" VerticalAlignment="Top" Click="TingshishezhiToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/tingshishezhi.png"/>
<TextBlock><Run Text="廳室設定"/></TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="80" Height="70" Cursor="Hand" Margin="2,5" Name="xiazaiToolBarButton" VerticalAlignment="Top" Click="xiazaiToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/jiaojieban.png"/>
<TextBlock><Run Text="更新菜品"/></TextBlock>
</StackPanel>
</RadioButton>
<RadioButton Width="80" Height="70" Cursor="Hand" Margin="2,5" Name="exportToolBarButton" VerticalAlignment="Top" Click="exportToolBarButton_Click" Style="{DynamicResource RDOButton}" SnapsToDevicePixels="True">
<StackPanel HorizontalAlignment="Center">
<Image Width="35" Height="35" Margin="0,5" Source="/MPCR.Client;component/Images/MakeupMenu.png"/>
<TextBlock><Run Text="制作菜單"/></TextBlock>
</StackPanel>
</RadioButton>
</StackPanel>
個人非常喜歡,原創
效果圖
最典型的應用 360 導航
自己感覺的,能做的,再和其他控件組合到一起,就帥了,是不是想到用它做個假的tab控件