Silverlight TabItem选中,未选中样式设置

<Application.Resources>
    <LinearGradientBrush x:Key="TabItemBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#B5D8FB" Offset="0"/>
        <GradientStop Color="#6DB9F1" Offset="0.5"/>
        <GradientStop Color="#0493E8" Offset="0.5"/>
        <GradientStop Color="#1CC0FF" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="TabItemSelectedBackground" EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#B4C6D3" Offset="0"/>
        <GradientStop Color="#2D678E" Offset="0.5"/>
        <GradientStop Color="#044977" Offset="0.5"/>
        <GradientStop Color="#06E1FA" Offset="1"/>
    </LinearGradientBrush>

    <Style TargetType="sdk:TabItem">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Foreground" Value="White" />
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Padding" Value="6,2,6,2"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="MinWidth" Value="5"/>
    <Setter Property="MinHeight" Value="5"/>

<ControlTemplate TargetType="sdk:TabItem">
    <Grid x:Name="Root">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                :省略(サンプルコードをダウンロードして確認してください)
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="BorderTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>
                        </ColorAnimationUsingKeyFrames>

                        <!-- 上部に配置されたタブがマウスオーバーされたときの背景色-->
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="GradientTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#6EA5A4"/>
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="GradientTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#20BBD2"/>
                        </ColorAnimationUsingKeyFrames>
                        <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="GradientTop">
                            <SplineColorKeyFrame KeyTime="0" Value="#47D9D3"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                :省略(サンプルコードをダウンロードして確認してください)
        </VisualStateManager.VisualStateGroups>

        <!-- 上部に配置されたタブの選択時 -->
        <Grid x:Name="TemplateTopSelected" Visibility="Collapsed" Canvas.ZIndex="1">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{Binding Background}" CornerRadius="3,3,0,0" Margin="-2,-2,-2,0">
                <Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0">
                    <Grid>
                        <!-- 選択時の背景色 -->
                        <Rectangle Fill="{StaticResource TabItemSelectedBackground}" Margin="0,0,0,-2"/>
                        <ContentControl x:Name="HeaderTopSelected"
                                        Cursor="{TemplateBinding Cursor}"
                                        Foreground="{TemplateBinding Foreground}"
                                        FontSize="{TemplateBinding FontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                        IsTabStop="False"
                                        Margin="{TemplateBinding Padding}"
                                        VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                    </Grid>
                </Border>
            </Border>
            <Border x:Name="FocusVisualTop" BorderBrush="#FF6DBDD1" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0" IsHitTestVisible="false" Margin="-2,-2,-2,0" Visibility="Collapsed"/>
            <Border x:Name="DisabledVisualTopSelected" Background="#8CFFFFFF" CornerRadius="3,3,0,0" IsHitTestVisible="false" Margin="-2,-2,-2,0" Opacity="0"/>
        </Grid>

        <!-- 上部に配置されたタブの未選択時 -->
        <Grid x:Name="TemplateTopUnselected" Visibility="Collapsed">
            <Border x:Name="BorderTop" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" CornerRadius="3,3,0,0">
                <Border x:Name="GradientTop" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0"
                        Background="{StaticResource TabItemBackground}">
                    <!-- 未選択時の背景色 -->
                    <Grid>
                        <ContentControl x:Name="HeaderTopUnselected" Cursor="{TemplateBinding Cursor}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                    </Grid>
                </Border>
            </Border>
            <Border x:Name="DisabledVisualTopUnSelected" Background="#8CFFFFFF" CornerRadius="3,3,0,0" IsHitTestVisible="false" Opacity="0"/>
        </Grid>

        :省略(サンプルコードをダウンロードして確認してください)
    </Grid>
</ControlTemplate>

</Style>

</Application.Resources>

效果还是比较给力的。

转自:http://blog.hiros-dot.net/?page_id=3906

时间: 2024-10-24 19:05:25

Silverlight TabItem选中,未选中样式设置的相关文章

android checkbox 未选中状态 已选中状态 替换成自己的图片

效果图: 未选中状态: 选中状态: 使用步骤: 1.创建自己的selector <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/cb_pressed" andro

JS----checked----checked选中和未选中的获取

全选.全不选.反选功能 html代码 <form action="" id="oForm" name="myForm">        <input type="checkbox" name="hobby" id="basket" value="basket">篮球<Br>        <input type="c

Objective-C-修改TabBarController的图标颜色及字体颜色(选中及未选中)

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.backgroundColor = [UIColor whiteColor]; UITabBarController *mainTabBar = [[UITabBarController alloc] init]; UIView *backView = [[UIView alloc] initWithFrame:CGRe

自定义tabBarItem选中和未选中的显示效果

以下代码是在TabBarViewController的ViewControllers的其中一个ViewController的viewDidLoad中写的!!! UIImage *image = [UIImage imageNamed:@"Heart"]; //item未选中状态时,image不使用tintColor的颜色 image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; //添加tabb

ListView未选中时背景

想给ListView设置未选中时背景,结果发现需要同时在ListView中设置listSelector和在ListView的单项item的布局文件中设置background,原因来日再查,知情者可以留言,谢谢. ListView项的布局代码如下: <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_co

checked=&quot;checked&quot;无效,radio未选中问题排查

在使用attr给元素设置属性的时候,但是显示在页面就是未选中,而且是只使用一两次是ok的,但是连着多使用就不起作用了,百度了下,发现遇到这个问题的人还蛮多的, 有人说,发现在jQuery1.6版本之后,用prop 替换了attr,替换了测试了下,果然OK,但是详细查询了下资料,发现这种说法并不准确 下面的用法就知道怎么用了: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参考这篇文章:https://

CSS3特殊伪类::selection改变页面选中文字的样式

一般在网页上面,选中文字的时候,文字的样式是会改变的,当然,样式也都是千篇一律的浏览器的默认样式,蓝底白字,偶然看到有些网页上面当文字选中的时候会有不一样的样式,当时就很是好奇,后来才慢慢发现是css的一个伪类::selection ::selection是一个CSS3选择器(这也告诉这我们CSS3必须要去熟悉,这玩意确实可以弄出很多意想不到的好效果.) 兼容性:IE9+,Chrome,Opera,Safari,Firefox…(也可以去查看)caniuse.com#search=::selec

iOS开发UITableViewCell的选中时的颜色设置

1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = UITableViewCellSelectionStyleBlue; //灰色 cell.selectionStyle = UITableViewCellSelectionStyleGray; 2.自定义颜色和背景设置 改变UITableViewCell选中时背景色: UIColor *color

隐藏列获取不到值,表格选中行提示未选中

1,隐藏某列之后,获取该列的值为空,将绑定属性加到其它未隐藏字段的关联query字段,以逗号隔开 2,当使用到标准产品功能,选中某一行,提示未选中,需要用默认的表格名称queryGrid 例:生成凭证选中行提示未选中,要使用默认id(queryGrid)

js循环GridView判断CheckBox是否全部未选中

function isQueryPriceReplyProduct() { var gridItem; var itemIndex = 0;  var IDS = ''; while (gridItem = dgQueryPriceReplyProduct.Table.GetRow(itemIndex)) {   itemIndex++;   if (!gridItem.Cells[0].Value) { continue; } IDS += gridItem.Cells[1].Value +