When focusing a TextBox with Tab, the cursor does not show. This does not change when typing. This problem is only resolved when the user clicks inside the TextBox.
Here is the code for my TextBox:
<TextBox x:Name="NameField"
Style="{StaticResource placeHolder}"
Tag="Name"
FontFamily="Courier New"
FontSize="48"
VerticalAlignment="Top"
FontWeight="Bold"
BorderBrush="{x:Null}"
SelectionBrush="{DynamicResource AccentColor}"
BorderThickness="0"
TextChanged="ChangeName"
Height="49"
KeyDown="UndoRedoKeyPress" />
I tried to resolve the error by adding this.Cursor = Cursors.IBeam; to the Change Text Event, but it did not work.
EDIT: I have reproduced this glitch in a new project with two TextBoxes in an empty window with the following style:
<Style x:Key="placeHolder" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<TextBox Text="{Binding Path=Text,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
x:Name="textSource"
Background="Transparent"
Foreground="{DynamicResource ForegroundColor}"
CaretBrush="{DynamicResource ForegroundColor}"
BorderBrush="{TemplateBinding BorderBrush}"
SelectionBrush="{TemplateBinding SelectionBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Panel.ZIndex="2"
AcceptsReturn="{TemplateBinding AcceptsReturn}"
AcceptsTab="{TemplateBinding AcceptsTab}"
TextWrapping="{TemplateBinding TextWrapping}" />
<TextBox Text="{TemplateBinding Tag}" Background="{DynamicResource BackgroundColor}" Panel.ZIndex="1" BorderBrush="{TemplateBinding BorderBrush}"
SelectionBrush="{TemplateBinding SelectionBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, Source={x:Reference textSource}}" Value="">
<Setter Property="Foreground" Value="LightGray"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When clicking on the first TextBox and then pressing Tab to focus the second TextBox. The cursor will not be visible while typing.
A TextBox style should include any childTextBox elements. Try this:
<Style x:Key="placeHolder" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Foreground" Value="{DynamicResource ForegroundColor}" />
<Setter Property="CaretBrush" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border"
Background="Transparent"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Panel.ZIndex="2"
SnapsToDevicePixels="True">
<Grid>
<TextBlock Text="{TemplateBinding Tag}" Foreground="LightGray">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource AncestorType=TextBox}}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I want to create a textbox with placeholder text, that doesn't turn blue on mouse over/focus.
Through experimentation and scouring the internet I've found that the following code is the simplest solutions to the individual problems.
Placeholder Text
<Style x:Key="PlaceHolderTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<TextBox Text="{Binding Path=Text,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
x:Name="textSource"
Background="Transparent"
Panel.ZIndex="2" />
<TextBox Text="{TemplateBinding Tag}" Background="{TemplateBinding Background}" Panel.ZIndex="1">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, Source={x:Reference textSource}}" Value="">
<Setter Property="Foreground" Value="Gray"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Focus Border replacement
<Style x:Key="CustomBorderTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#000000"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="Yellow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
However, you can't just combine them. Putting both the grid and border in one ControlTemplate doesn't work, so how would you create a style that replaces the border and also displays placeholder text (preferably without code-behind)?
combine them by adding a panel (Grid) which can have more than one child.
I took "CustomBorderTextBox" as base and added placehold TextBlock which becomes visible when text is empty. Placeholder text is stored TextBox.Tag
<Style x:Key="CustomTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
<TextBlock Text="{TemplateBinding Tag}" IsHitTestVisible="False">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Visibility" Value="Hidden"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource AncestorType=TextBox}}"
Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#000000"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="Yellow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am struggling with testing of my wpf application, in which I have a window with TextBoxes, that contain a custom style from Application.Resources
The style implements a placeholder, and because it interfered with tabbing(it focused the placeholder instead of TB content) I had to add some IsTabStop code.
It's working perfectly fine when Im debugging and also the release exe on Win7, but the tabbing doesn't work on Win10, it simply ignores TextBoxes and just tabs trough other controls that don't have this style implemented.
Any help would be great!
Here is the style code:
<Style x:Key="placeHolderNoline" TargetType="{x:Type TextBox}" BasedOn="{StaticResource tb}">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<TextBox Text="{Binding Path=Text,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
x:Name="textSource"
Background="Transparent"
Panel.ZIndex="2"
BorderThickness="0,0,0,0"/>
<TextBox Text="{TemplateBinding Tag}" Background="{TemplateBinding Background}" Panel.ZIndex="1" BorderThickness="0" IsTabStop="False">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, Source={x:Reference textSource}}" Value="">
<Setter Property="Foreground" Value="LightGray"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit: tb style:
<Style TargetType="TextBox" x:Key="tb">
<Setter Property="Foreground" Value="WhiteSmoke"/>
<Setter Property="Background" Value="#33FFFFFF"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
A ControlTemplate of a TextBox is not supposed to include another or two other TextBox elements.
Try this style:
<Style x:Key="placeHolderNoline" TargetType="TextBox" BasedOn="{StaticResource tb}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="#FFABAdB3"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<TextBlock Text="{TemplateBinding Tag}" Foreground="LightGray" Background="{TemplateBinding Background}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource AncestorType=TextBox}}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a listview bound to a vm collection. The listview contains buttons, and what I'm trying to achieve is that when the user presses a button, it simply changes color. However, I can't figure out how to do this. Any help would be greatly appreciated.
<ListView
x:Name="GridControlOrders"
SelectionMode="Single"
ItemsSource="{Binding Orders}"
SelectedItem="{Binding Sale}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Button Style="{StaticResource StyleButtonOrders}">
<Grid>
<TextBlock Text="{Binding DisplayData}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextAlignment="Center"
TextWrapping="Wrap" />
</Grid>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<EventSetter Event="PreviewMouseDown" Handler="ItemOnPreviewMouseDown" />
<EventSetter Event="PreviewMouseUp" Handler="ItemOnPreviewMouseUp" />
<Setter Property="Width" Value="{Binding Source={x:Static p:Settings.Default}, Path=CardViewCardWidthItem, Mode=TwoWay}" />
<Setter Property="Height" Value="{Binding Source={x:Static p:Settings.Default}, Path=CardViewCardHeightItem, Mode=TwoWay}" />
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<Style TargetType="{x:Type ScrollBar}" BasedOn="{StaticResource StyleScrollBarTouchscreenNarrow}"/>
</ListView.Resources>
</ListView>
<Style TargetType="{x:Type Button}" x:Key="StyleButtonTouchscreen" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="Auto"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template" Value="{StaticResource ButtonTouchControlTemplate}"/>
</Style>
<ControlTemplate x:Key="ButtonTouchControlTemplate" TargetType="{x:Type ButtonBase}">
<Border x:Name="border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Background" TargetName="border" Value="Red"/>
<Setter Property="BorderBrush" TargetName="border" Value="Red"/>
</Trigger>
<Trigger Property="Button.IsDefaulted" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="border" Value="Orange"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Did you just want to create a listview with buttons that change color when the item (or button) is clicked? You can take advantage of the IsSelected property of the ListViewItem
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="DataContext" Value="{Binding}" />
<Setter Property="Height" Value="30" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border Background="Transparent" >
<Button x:Name="button" HorizontalAlignment="Left" Width="150" Content="{Binding DisplayData}" IsHitTestVisible="False"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="button" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Also, set SelectionMode="Single" on the ListView if you want only one button at a time to change background or SelectionMode="Multiple" if you want buttons at a time to change background when clicked.
The xaml for the first style works as I want, producing a button with a Wingding glyph using setters to lay out the content and it's properties. The second version of this style is trying to do the same thing but with a DataTemplate for the Content, but it just displays the type of a DataTemplate (ie, System.Windows.DataTemplate).
Why won't the 2nd version display the same content as the 1st?
Assuming the fix is trivial, would one version of the style be preferable over the other for any reason beyond personal preference?
NOTE: I am showing the bindings and triggers in case there is something in there that is affecting the content, but it's only the the first part of the style that varies
Cheers,
Berryl
Style 1
Displays:
<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" >
<Setter Property="Content" Value="a" />
<Setter Property="Foreground" Value="Navy" />
<Setter Property="FontFamily" Value="Wingdings 3" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="Auto" />
<!--What makes it an Edit button-->
<Setter Property="Command" Value="{Binding ActivateThisSatelliteVmCommand}"/>
<Setter Property="ToolTip">
<Setter.Value>
<TextBlock>
<TextBlock.Text>
<Binding Path="HeaderLabel" StringFormat="{resx:Resx ResxName=Smack.Core.Presentation.Resources.MasterDetail, Key=Item_Edit_Label}"/>
</TextBlock.Text>
</TextBlock>
</Setter.Value>
</Setter>
<!-- WHen its available -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="theBorder" CornerRadius="4">
<ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="theContent" Property="Visibility" Value="Hidden"/>
<Setter TargetName="theBorder" Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
<Setter TargetName="theBorder" Property="Background" Value="Orange"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style 2
Displays "System.Windows.DataTemplate"
<Style x:Key="EditCommandButtonStyle" TargetType="{x:Type Button}" >
<Setter Property="Content">
<Setter.Value>
<DataTemplate>
<TextBlock Text="a" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" />
</DataTemplate>
</Setter.Value>
</Setter>
<!--What makes it an Edit button-->
<Setter Property="Command" Value="{Binding ActivateThisSatelliteVmCommand}"/>
<Setter Property="ToolTip">
<Setter.Value>
<TextBlock>
<TextBlock.Text>
<Binding Path="HeaderLabel" StringFormat="{resx:Resx ResxName=Core.Presentation.Resources.MasterDetail, Key=Item_Edit_Label}"/>
</TextBlock.Text>
</TextBlock>
</Setter.Value>
</Setter>
<!-- When its available -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="theBorder" CornerRadius="4">
<ContentPresenter x:Name="theContent" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="theContent" Property="Visibility" Value="Hidden"/>
<Setter TargetName="theBorder" Property="Background" Value="Transparent"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="theContent" Property="Visibility" Value="Visible"/>
<Setter TargetName="theBorder" Property="Background" Value="Orange"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Your Content property is set to a DataTemplate
DataTemplates are meant to be used with Template properties, and not directly inserted into the VisualTree via the Content property
Change your Style Setter to set the ContentTemplate instead of Content and it should work fine
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="a" FontFamily="Wingdings 3" FontWeight="Bold" FontSize="18" Foreground="Navy" />
</DataTemplate>
</Setter.Value>
</Setter>
As for your second question, I prefer the first because its simpler, and I think it may contain fewer elements in the Visual Tree (I'd have to double-check that)
I found another way to resolve this issue:
<Style x:Key="DefaultButtonBaseStyle" TargetType="{x:Type ButtonBase}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Grid>
<Border x:Name="BackBorder" Margin="0" Padding="0"
BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding BorderBrush}"/>
<Border x:Name="FrontBorder" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"
Margin="0" Padding="{TemplateBinding Padding}"
CornerRadius="{Binding ElementName=BackBorder, Path=CornerRadius}">
<ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do I style the Tab Control Border so that the selected Tab Item does not have a line underneath it?
These are my Tab Control and Tab Item styles so far.
<!-- Tab control styling -->
<Style TargetType="{x:Type TabControl}">
<Setter Property="Padding" Value="10,5,10,5" />
<Setter Property="Margin" Value="3.5" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
</Style>
<!-- Tab item styling -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
BorderBrush="Black"
BorderThickness="1,1,1,0"
CornerRadius="3,3,0,0"
MinWidth="120">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="Background" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontWeight="Bold" Text="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If I can achieve the look displayed in the screenshot without having to overload the tab item control template then I don't have an issue as the default tab item template doesn't have the line underneath it on the selected tab. I haven't been able to do this so far. Thanks for your help.
The XAML below is how I have overridden the TabControl to solve this problem. The key piece of info is the Margin property of the HeaderPanel. You will see that the bottom margin is -1, which shifts it down just enough to cover up that line.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="1"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2">
<Border.Background>
<SolidColorBrush Color="White"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="White"/>
</Border.BorderBrush>
<ContentPresenter x:Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Add property Padding="0,0,0,0" to tab control :-)
Instead of modifying tabcontrol template, you may as well just modify the TabItem template, by adding two lines to cover up the border, and using minus margins for covering up.
(Please take a look at "TopLineCover" and "BottomLineCover" borders.)
<Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
<Setter Property="Foreground" Value="{DynamicResource VsBrush.WindowText}"/>
<Setter Property="Background" Value="{DynamicResource VsBrush.Window}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="HeaderBorder" Padding="8,3,8,3" BorderThickness="1,1,1,0"
Background="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBrushKey}}"
BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}">
<ContentPresenter x:Name="Content" ContentSource="Header"
HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
/>
</Border>
<Border x:Name="TopLineCover" BorderThickness="1,1,1,0" Margin="0,-2,0,0" Height="3" Panel.ZIndex="100"
Background="{DynamicResource VsBrush.Window}" BorderBrush="{DynamicResource {x:Static commonControls:ColorService.JobViewHeaderBorderBrushKey}}"
VerticalAlignment="Top" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
<Border x:Name="BottomLineCover" BorderThickness="0,0,0,3" Margin="1,0,1,-2" Panel.ZIndex="100" BorderBrush="{DynamicResource VsBrush.Window}"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Visibility="Collapsed"/>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="HeaderBorder" Value="{DynamicResource VsBrush.Window}"/>
<Setter Property="Visibility" TargetName="TopLineCover" Value="Visible"/>
<Setter Property="Visibility" TargetName="BottomLineCover" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the past I've accomplished this by making the TabItem extend a little further down then it's allocated, so its actually drawn on top of the border element and hides it
I can't remember how I did it exactly, but I think it was with a negative margin on the bottom of the TabItem