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