2017-04-06 72 views
0

我想以编程方式将TabItemBackground属性绑定到自定义属性。WPF以编程方式绑定选定的项目项背景属性

Selected Tab

Unselected Tab

TabItem被编程与所述绑定一起产生:

Binding binding = new Binding(); 
binding.Source = this; 
binding.Converter = this; 
binding.Path = new PropertyPath("HasChanged"); 
binding.Mode = BindingMode.OneWay; 
binding.TargetNullValue = tabItem.Background; 
binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 
BindingOperations.SetBinding(tabItem, TabItem.BackgroundProperty, binding); 

予实现的接口到目前为止当TabItem未选择自定义背景仅施加IValueConverter

public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
{ 
    GradientStopCollection gradient = new GradientStopCollection(); 
    gradient.Add(new GradientStop(Color.FromRgb(255, 234, 199), 0)); 
    gradient.Add(new GradientStop(Color.FromRgb(255, 233, 194), 0.5)); 
    gradient.Add(new GradientStop(Color.FromRgb(255, 225, 173), 0.5)); 
    gradient.Add(new GradientStop(Color.FromRgb(255, 221, 163), 1)); 
    Brush brush = new LinearGradientBrush(gradient, 90); 
    return (bool)value ? brush : null; 
} 

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
{ 
    return null; 
} 

如何绑定属性以影响所选的TabItem

+0

你需要编辑'TabItem的模板'。默认模板具有触发“IsSelected”属性的功能,并且在该触发器中,他们将“Background”设置为固定值,以覆盖绑定。所以你需要重新创建这个模板而没有不必要的触发。 – Evk

+0

有关如何更改所选TabItem的背景色的示例,请参阅以下答案:http://stackoverflow.com/questions/42026529/how-can-i-change-the-style-of-a- WPF-的TabControls-的ItemTemplate那么该-I-可以设置/ 42027077#42027077 – mm8

回答

0

我结束了使用部分Arie的答案,但我不能使用他的模板,因为我想要默认的Windows Tab风格。

我的第一步是删除所有程序生成的绑定和转换器。然后,我使用TabItemTag属性作为布尔值来标记哪些选项卡应该高亮显示。

tabItem.Tag = true; 

正如阿里说,我需要覆盖的TabItem模板在我的XAML文件。我使用this method生成默认模板TabItem

最后一步是在触发器中定义一些Setters以检查Tag属性是否设置为true。此外,您需要定义Tag应该转换为布尔值而不是字符串。为此你需要在你的Window元素来定义sys

<Window ... 
    xmlns:sys="clr-namespace:System;assembly=mscorlib" 
... > 

解释房产Tag布尔:

<Trigger.Value> 
    <sys:Boolean>True</sys:Boolean> 
</Trigger.Value> 

所得TabItem模板:

<TabControl ... > 
    <TabControl.Resources> 
     <Style TargetType="TabItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <Grid SnapsToDevicePixels="True"> 
          <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"> 
           <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/> 
          </Border> 
         </Grid> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Background" TargetName="Bd"> 
            <Setter.Value> 
             <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
              <GradientStop Color="#FFEAF6FD" Offset="0.15"/> 
              <GradientStop Color="#FFD9F0FC" Offset="0.5"/> 
              <GradientStop Color="#FFBEE6FD" Offset="0.5"/> 
              <GradientStop Color="#FFA7D9F5" Offset="1"/> 
             </LinearGradientBrush> 
            </Setter.Value> 
           </Setter> 
          </Trigger> 
          <Trigger Property="Tag"> 
           <Trigger.Value> 
            <sys:Boolean>True</sys:Boolean> 
           </Trigger.Value> 
           <Setter Property="Background" TargetName="Bd"> 
            <Setter.Value> 
             <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> 
              <GradientStop Color="#FFFFEAC7" Offset="0.15"/> 
              <GradientStop Color="#FFFFE9C2" Offset="0.5"/> 
              <GradientStop Color="#FFFFE1AD" Offset="0.5"/> 
              <GradientStop Color="#FFFFDDA3" Offset="1"/> 
             </LinearGradientBrush> 
            </Setter.Value> 
           </Setter> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="True"> 
           <Setter Property="Panel.ZIndex" Value="1"/> 
           <Setter Property="Background" TargetName="Bd" Value="#FFF9F9F9"/> 
          </Trigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSelected" Value="True"/> 
            <Condition Property="Tag"> 
             <Condition.Value> 
              <sys:Boolean>True</sys:Boolean> 
             </Condition.Value> 
            </Condition> 
           </MultiTrigger.Conditions> 
           <Setter Property="Background" TargetName="Bd" Value="#FFFFE5C1"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSelected" Value="False"/> 
            <Condition Property="IsMouseOver" Value="True"/> 
           </MultiTrigger.Conditions> 
           <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3C7FB1"/> 
          </MultiTrigger> 
          <Trigger Property="TabStripPlacement" Value="Bottom"> 
           <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/> 
          </Trigger> 
          <Trigger Property="TabStripPlacement" Value="Left"> 
           <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/> 
          </Trigger> 
          <Trigger Property="TabStripPlacement" Value="Right"> 
           <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/> 
          </Trigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSelected" Value="True"/> 
            <Condition Property="TabStripPlacement" Value="Top"/> 
           </MultiTrigger.Conditions> 
           <Setter Property="Margin" Value="-2,-2,-2,-1"/> 
           <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSelected" Value="True"/> 
            <Condition Property="TabStripPlacement" Value="Bottom"/> 
           </MultiTrigger.Conditions> 
           <Setter Property="Margin" Value="-2,-1,-2,-2"/> 
           <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSelected" Value="True"/> 
            <Condition Property="TabStripPlacement" Value="Left"/> 
           </MultiTrigger.Conditions> 
           <Setter Property="Margin" Value="-2,-2,-1,-2"/> 
           <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/> 
          </MultiTrigger> 
          <MultiTrigger> 
           <MultiTrigger.Conditions> 
            <Condition Property="IsSelected" Value="True"/> 
            <Condition Property="TabStripPlacement" Value="Right"/> 
           </MultiTrigger.Conditions> 
           <Setter Property="Margin" Value="-1,-2,-2,-2"/> 
           <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/> 
          </MultiTrigger> 
          <Trigger Property="IsEnabled" Value="False"> 
           <Setter Property="Background" TargetName="Bd" Value="#FFF4F4F4"/> 
           <Setter Property="BorderBrush" TargetName="Bd" Value="#FFC9C7BA"/> 
           <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TabControl.Resources> 
    <TabItem></TabItem> 
</TabControl> 
1

正如在mm8提供的链接中提到的那样,您需要重写TabItem的ControlTemplate。下面是TabControl的实现,带有左侧的选项卡和TabItem的自定义ControlTemplate。所选项目是通过改变边框的厚度强调:

<TabControl TabStripPlacement="Left" 
       VerticalAlignment="Stretch" 
       HorizontalContentAlignment="Stretch" 
       Name="tc" 
       ItemsSource="{Binding MySource, Mode=OneWay}" 
       ContentTemplate="{StaticResource templateForTheContent}" 
       ItemTemplate="{StaticResource templateForTheHeader}"> 
     <TabControl.Resources> 
      <Style TargetType="TabItem"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="TabItem"> 
          <Border Name="brdPanel" 
            CornerRadius="3,0,0,3" 
            BorderBrush="Black" 
            Background="{TemplateBinding Background}" 
            Margin="2,2,0,2" 
            BorderThickness="1,1,0,1"> 
           <ContentPresenter VerticalAlignment="Center" 
                HorizontalAlignment="Center" 
                ContentSource="Header" 
                Margin="10,2" /> 
          </Border> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsSelected" 
             Value="True"> 
            <Setter TargetName="brdPanel" 
              Property="BorderThickness" 
              Value="2,2,0,2" /> 
            <Setter TargetName="brdPanel" 
              Property="Margin" 
              Value="1,1,0,1" /> 
           </Trigger> 
           <Trigger Property="IsSelected" 
             Value="False"> 
            <Setter TargetName="brdPanel" 
              Property="BorderThickness" 
              Value="1,1,0,1" /> 
            <Setter TargetName="brdPanel" 
              Property="Margin" 
              Value="2,2,0,2" /> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </TabControl.Resources> 
    </TabControl> 

下面为背景的结合手动设置为浅珊瑚红(这里结合源设置不同于OP的示范考核的目的):

 MyItemVM myItem=this.tc.Items[0]; 
     TabItem tabItem = (TabItem)this.tc.ItemContainerGenerator.ContainerFromItem(myItem); 

     Binding binding = new Binding(); 
     binding.Source = myItem; 
     binding.Path = new PropertyPath("GroupBackground"); 
     binding.Mode = BindingMode.OneWay; 
     binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 
     BindingOperations.SetBinding(tabItem, TabItem.BackgroundProperty, binding); 

     myItem.GroupBackground = Brushes.LightCoral; 

     MyItemVM myItem=this.tc.Items[1]; 
     tabItem = (TabItem)this.tc.ItemContainerGenerator.ContainerFromItem(myItem); 

     binding = new Binding(); 
     binding.Source = myItem; 
     binding.Path = new PropertyPath("GroupBackground"); 
     binding.Mode = BindingMode.OneWay; 
     binding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged; 
     BindingOperations.SetBinding(tabItem, TabItem.BackgroundProperty, binding); 

     myItem.GroupBackground = Brushes.LightCoral; 

结果如下所示: enter image description here

请注意,这只会改变TabItem的标题背景。

相关问题