Silverlight的按钮样式

时间:2011-12-05 14:06:38

标签: silverlight

我正在尝试将控件设置为类似于Silverlight中用于嵌入窗口的选项卡控件。

我已经开始使用这些按钮,使它们看起来像标签项。

我遇到的问题是我想要一个“活动”选项卡的概念,并通过此更改活动选项卡颜色或更改非活动选项卡的颜色。我有一种想法,添加一个自定义视觉状态'活跃'可能是一个选项,但我是一个完整的银色新手,所以也许这是不正确的。

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" xmlns:local="clr-namespace:WindowsEmbeddedSilverlightApplication1"
x:Class="WindowsEmbeddedSilverlightApplication1.MainPage"
Width="800" Height="480">

<UserControl.Resources>
    <Style x:Key="TabItemFirst" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="#FFC5EEFF" CornerRadius="5,5,0,0" BorderBrush="Black" BorderThickness="1">                          
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="TabItemNext" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="#C8E9F7" Margin="-1,0,0,0" CornerRadius="5,5,0,0" BorderBrush="Black" BorderThickness="1">
                        <ContentPresenter  HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>                       
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

    <StackPanel Orientation="Horizontal">
        <Button Canvas.ZIndex="3" Width="75" Height="25" Style="{StaticResource TabItemFirst}" Content="Left"/>
        <Button Canvas.ZIndex="2" Width="75" Height="25" Style="{StaticResource TabItemNext}" Content="Center"/>
        <Button Canvas.ZIndex="1" Width="75" Height="25" Style="{StaticResource TabItemNext}" Content="Right"/>
    </StackPanel>

</Grid>
</UserControl>

非常感谢任何有关如何实现此功能的指示。

1 个答案:

答案 0 :(得分:0)