【问题标题】:Changing Border of WPF Tab Control Dynamically动态更改 WPF 选项卡控件的边框
【发布时间】:2017-03-02 07:25:47
【问题描述】:

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

在模板中,选定的 TabItem 的颜色取决于返回 Brush 的属性“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

【问题讨论】:

  • 关于“函数'SelectedBrush'”的更多细节? this post 还展示了一种很好的模板参数化方法
  • 我在代码底部添加了 SelectedBrush 函数。此代码位于承载选项卡控件的表单中
  • 注意:SelectedBrush 实际上是一个属性而不是一个函数

标签: wpf tabcontrol controltemplate wpf-style


【解决方案1】:

这是一种带有 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属性

【讨论】:

  • 感谢您的代码。我稍后会检查一下。同时有一个问题......这是否会在未选中时将各种选项卡项设为灰色?
  • @RhydianCoombs,它将稍作修改(见编辑)。没有注意到 TabItem 模板中使用了 SelectedBrush,因为那部分代码被长水平滚动隐藏了
  • 非常感谢您提供的信息。这是一个伟大的,并得到了一切工作。里德。
  • 道歉。在这个网站上没有发布太多。现在应该接受
猜你喜欢
  • 2015-03-17
  • 1970-01-01
  • 1970-01-01
  • 2020-11-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多