动态更改WPF选项卡控件的边框

时间:2017-03-02 07:25:47

标签: wpf tabcontrol controltemplate wpf-style

我在项目的应用程序资源中使用我自己的控件模板作为TabControl和TabItem。

在模板中,所选TabItem的颜色取决于属性' SelectedBrush'返回一个画笔。我还希望选项卡控件的边框(boTabControl,内容展示器周围的边框)与选定的TabItem颜色相同。

这是代码还是可以在应用程序资源中完成?

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid Margin="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel Grid.Row="0" Panel.ZIndex="1" Margin="0,3,0,0" IsItemsHost="True" Background="Transparent"/>
                    <Border x:Name="boTabControl" Grid.Row="1" BorderThickness="1,3,0,0" CornerRadius="0" Padding="0" Margin="0" BorderBrush="{DynamicResource SelectedBrush}">
                        <ContentPresenter ContentSource="SelectedContent" Margin="0"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="True">
                        <Setter TargetName="boTabControl" Property="BorderBrush" Value="{Binding SelectedBrush}" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="boTabControl" Property="BorderBrush" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid x:Name="Panel" Background="Transparent">
                    <Border x:Name="Border" Margin="0,0,-3,0" BorderThickness="1,1,1,0" CornerRadius="10,30,0,0">
                        <ContentPresenter x:Name="ContentSite" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ContentSource="Header" Margin="10"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Bold" />
                        <Setter TargetName="Border" Property="Background" Value="{Binding SelectedBrush}" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsSelected" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="LightGray" />
                        <Setter Property="FontWeight" Value="Normal" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="FontWeight" Value="Bold" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
Public ReadOnly Property SelectedBrush As Brush
    Get
        If Me.tcMain.SelectedItem Is Nothing Then
            Return Brushes.Aquamarine
            Exit Property
        End If
        Dim myTabItem As TabItem = Me.tcMain.SelectedItem
        Dim myBrush As Brush = Brushes.Blue
        Select Case myTabItem.Name
            Case Me.tiSale.Name
                myBrush = Brushes.Green
            Case Me.tiReturn.Name
                myBrush = Brushes.Red
            Case Me.tiStock.Name
                myBrush = Brushes.Black
            Case Me.tiAdmin.Name
                myBrush = Brushes.Purple
        End Select

        Return myBrush
    End Get
End Property

1 个答案:

答案 0 :(得分:0)

这是一种附加属性为Selected Brush

的SelectedBrush的方法

将附加类添加到项目(并进行构建):

public class Attached
{
    public static DependencyProperty SelectedBrushProperty = DependencyProperty.RegisterAttached("SelectedBrush", typeof(Brush), typeof(Attached));

    public static Brush GetSelectedBrush(DependencyObject obj)
    {
        return (Brush) obj.GetValue(SelectedBrushProperty);
    }

    public static void SetSelectedBrush(DependencyObject obj, Brush value)
    {
        obj.SetValue(SelectedBrushProperty, value);
    }
}

然后为每个TabItem指定颜色:

<TabControl>
    <TabItem Name="tiSale" local:Attached.SelectedBrush="Green" Header="123"/>
    <TabItem Name="tiReturn" local:Attached.SelectedBrush="Red" Header="abc"/>
    <TabItem Name="tiStock" local:Attached.SelectedBrush="Black" Header="XYZ"/>
</TabControl>

将TabControl模板更改为使用Attached.SelectedBrush

<Style TargetType="{x:Type TabControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid Margin="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <TabPanel Grid.Row="0" Panel.ZIndex="1" Margin="0,3,0,0" IsItemsHost="True" Background="Transparent"/>
                    <Border x:Name="boTabControl" Grid.Row="1" 
                            BorderThickness="1,3,0,0" 
                            BorderBrush="{Binding Path=SelectedItem.(local:Attached.SelectedBrush), RelativeSource={RelativeSource TemplatedParent}}"
                            CornerRadius="0" Padding="0" Margin="0">
                        <ContentPresenter ContentSource="SelectedContent" Margin="0"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

对TabItem使用相同的画笔,更改背景设置器如下:

<Setter TargetName="Border" Property="Background" 
        Value="{Binding (local:Attached.SelectedBrush), RelativeSource={RelativeSource TemplatedParent}}" />
此处未使用代码隐藏的

SelectedBrush属性