原文:
潜移默化学会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控件
