I have a datagrid in my window (WPF) with the below styling (image & XAML shown below)
datagrid
<!-- Style of data grid -->
<Style TargetType="{x:Type DataGrid}" x:Key="test">
<Setter Property="ColumnHeaderStyle" >
<Setter.Value>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Height" Value="35" />
<Setter Property="SeparatorBrush" Value="DarkRed" />
<Setter Property="FontWeight" Value="Black" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="columnHeaderBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="LightYellow" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="columnHeaderBorder"
BorderThickness="1"
Padding="3,0,3,0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#18aab8" />
<GradientStop Offset="1" Color="#10717a" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="#661fe0" />
<GradientStop Offset="1" Color="#4e12b5" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="RowStyle" >
<Setter.Value>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Foreground" Value="#FFB3B3B3"/>
<Setter Property="Height" Value="25"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FF262626"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#FF383838"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#FF333333"/>
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="CellStyle">
<Setter.Value>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="#121212">
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="SeaGreen"/>
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
<!-- Window.xaml -->
<DataGrid Background="#181735" Style="{StaticResource test}"
CanUserAddRows="false"
Grid.Column="4"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
Margin="15,0,10,5"
VerticalAlignment="Stretch" />
The problems are
There seems to be an extra column with no data for some reason in the datagrid. How do I get rid of that? I've tried adding something like
<Setter Property="Width" Value="*"/>` inside `<Setter Property="RowStyle"> <Setter.Value> <Style TargetType="{x:Type DataGridRow}">
but getting an error:
System.Windows.Markup.XamlParseException: 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an exception.' Line number #### and line position ###. ---> System.FormatException: '*' string cannot be converted to Length.`
There is a white type of border on extreme left side of the data grid(see 1st image), how do I get rid of that & also the scroll bar design needs to be changed as well.
Does anyone has a suggestion what type of scroll bar should go well with my design. If you have something like that please share.
scrollbar
I'm new to this, so please help.
For your first and second question, you can use the following properties on the Datagrid style directly:
<Style TargetType="{x:Type DataGrid}" x:Key="test">
<Setter Property="ColumnWidth" Value="*"></Setter>
<Setter Property="HeadersVisibility" Value="Column"></Setter>
...
</Style>
ColumnWidth set to "*" allows you to use equal width on all your columns. In case you use AutoGenerateColumns to false on your Grid, you can also define the widths of each column on a case-by-case basis.
HeadersVisibility set to "Column" hide the left row selector.
Concerning the Style of the Scrollbar, I share you a style I use:
<Style x:Key="ScrollBarCustomThumb" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Fill="Transparent" />
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="{TemplateBinding Background}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag"
Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle"
Property="Width"
Value="Auto" />
<Setter TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ScrollBar">
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<Setter Property="Foreground" Value="#c1c1c1" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Width" Value="7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot"
Width="10"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Track x:Name="PART_Track"
Grid.Row="0"
IsDirectionReversed="true"
Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarCustomThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Opacity="0"
Focusable="false" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb"
Property="IsMouseOver"
Value="true">
<Setter Value="#a8a8a8"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="#787878"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Thumb"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation"
Value="Horizontal">
<Setter TargetName="GridRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="8" />
<Setter TargetName="Thumb"
Property="Tag"
Value="Horizontal" />
<Setter TargetName="PageDown"
Property="Command"
Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp"
Property="Command"
Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It's up to you to judge whether or not it suits your design, but in any case it will give you a base that you can modify!
So I am curious to why the scrollviewers repeatbutton at the bottom is white, it should be transparent, I didnt notice this until I resized my scrollviewer to fit perfectly, how do I change it's color to transparent?
I was looking throught the
RepeatButton part of the style and tried changing the background property but that didn't work either, it did nothing.
I even tried hiding it like so
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false"
Visibility="Hidden"/>
But that didnt work either, it was still there.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ScrollBarTrackThumb"
TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Fill="Transparent" />
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="{TemplateBinding Background}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag"
Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle"
Property="Width"
Value="Auto" />
<Setter Property="Background" Value="Transparent"/>
<Setter TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Foreground"
Value="#ADABAB" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Width"
Value="7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot"
Width="7"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Track x:Name="PART_Track"
Grid.Row="0"
IsDirectionReversed="true"
Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Opacity="0"
Focusable="false"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb"
Property="IsMouseOver"
Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Thumb"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation"
Value="Horizontal">
<Setter TargetName="GridRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="8" />
<Setter TargetName="Thumb"
Property="Tag"
Value="Horizontal" />
<Setter TargetName="PageDown"
Property="Command"
Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp"
Property="Command"
Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And the actual scrollviewer
<ScrollViewer Height="380"
Margin="10">
<ListView ItemsSource="{Binding MessageViewModel.Messages}"
x:Name="MyListView"
Background="Transparent"
BorderThickness="0"
Height="380">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding Message}"
FontFamily="Consolas"
Foreground="#61d73d"
TextWrapping="Wrap"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
like Klaus, I think the issue is not with your repeatButton. Rather, you see the (white) background through your repeatButton.
try putting a red rectangle just behind your scrollButton to see the outcome
or even better : use snoop to check this kind of issue.
but also, Clemens is right : style/template the scrollviewer inside the listView, rather than outside.
I have applied the evernote tag control which is working but the design is not in multi line as I add tag it is added next to the previous tag and adding in the single line, but it has to move down when there is no more space on the page. Here is the screenshot of what I want:
I have followed this link : http://stackoverflow.com/questions/15167809/how-can-i-create-a-tagging-control-similar-to-evernote-in-wpf but still unable to get the tags in multi line. Please let me know where I am going wrong. Following is my xaml:
<!-- EvernoteTagControl default style -->
<Style TargetType="{x:Type local:EvernoteTagControl}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White" />
<LinearGradientBrush x:Key="IconBrush" EndPoint="0,1">
<GradientStop Color="#5890f0" Offset="0" />
<GradientStop Color="#0351d7" Offset="1" />
</LinearGradientBrush>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="15 25 15 15" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagControl}">
<Grid>
<Grid.ColumnDefinitions>
<!--<ColumnDefinition Width="Auto" />-->
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!--<Path Grid.Column="0" Margin="2" Fill="{StaticResource IconBrush}" Height="19" Stretch="Uniform" Data="M 50.535714,0.44196425 0.00446427,34.754464 l 0,106.906246 100.71874573,0 0,-107.124996 L 50.535714,0.44196425 z m 0.1875,21.21874975 c 6.311826,0 11.40625,5.094424 11.40625,11.40625 0,6.311826 -5.094424,11.4375 -11.40625,11.4375 -6.311826,0 -11.4375,-5.125674 -11.4375,-11.4375 0,-6.311826 5.125674,-11.40625 11.4375,-11.40625 z" />-->
<ItemsPresenter Grid.Column="0" Margin="2" />
<Button Margin="5,0,0,0" Grid.Column="1" Content="Click to add..." x:Name="PART_CreateTagButton">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter TextElement.Foreground="#FF555555" VerticalAlignment="Center" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditing" Value="True">
<Setter TargetName="PART_CreateTagButton" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel" >
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- EvernoteTagItem default style -->
<Style TargetType="{x:Type local:EvernoteTagItem}">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="50" />
<Setter Property="Margin" Value="0,0,2,0" />
<Setter Property="Padding" Value="5,2,0,2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
<Button x:Name="PART_TagButton" Content="{TemplateBinding Text}" Foreground="#ffffff" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" BorderBrush="#00698C" BorderThickness="1" CornerRadius="2" Background="#00698C" >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,0,0,2" />
<Button x:Name="PART_DeleteTagButton" Grid.Column="1" Margin="3,0" VerticalAlignment="Center" HorizontalAlignment="Right" >
<Button.Template>
<ControlTemplate>
<Grid Height="10" Width="10" Background="#00698C" >
<Path Stretch="Uniform" ClipToBounds="True" Stroke="{StaticResource HighlightBrush}" StrokeThickness="1" Data="M 85.364473,6.9977109 6.0640998,86.29808 6.5333398,85.76586 M 6.9926698,7.4977169 86.293043,86.79809 85.760823,86.32885" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Border>
<!--<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#ffffff" />
<Setter TargetName="PART_DeleteTagButton" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>-->
</ControlTemplate>
</Button.Template>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditing" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:EvernoteTagItem}">
<tkInput:AutoCompleteBox x:Name="PART_InputBox"
Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
ItemsSource="{Binding AllTags, RelativeSource={RelativeSource AncestorType={x:Type local:EvernoteTagControl}}}"
IsTextCompletionEnabled="True"
/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I am getting these tags as:
Currently, you use a StackPanel as ItemsPanel, but a stack panel will never wrap its items in multiple dimensions. So instead, you should try panels like WrapPanel or UniformGrid
For the WrapPanel, you also need to set a Width in the ItemContainerStyle in order to assure same size for all tag items (according to your "what I want" picture).
Then you have to decide on the positioning of your PART_CreateTagButton button. With multi lines of tags, the grid layout of ItemsPresenter and PART_CreateTagButton might no longer be appropriate.
You can probably create a compound items source of the original tag items source and the button as last item. This way, the button will always be properly aligned with the tags. See Add extra items when using ItemsSource and How do you bind a CollectionContainer to a collection in a view model? for more details.
Have used the method to set a fullrowselect for TreeViewItems
here: Lee Campbell horizontal stretch for treeviewitems
This works well for the top level items.
But there seems to be a problem with the TreeViewItem.Items
collection, which seems not to take the right template.
(I see it is not in the TreeView.Items collection, as the template suggests)
Is there an easy way to derive the subitem style from the parent item style?
How can I describe the style once (for all TreeviewItems) and let the style
be used for all TreeViewItems, whether they are in the TreeView.Items or
in the TreeViewItem.Items collection?
Here is my XAML, some code is from the LeeCampbell example.
<Window x:Class="TreeViewFullRow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TreeViewFullRow"
Title="MainWindow"
Width="525"
Height="350">
<Window.Resources />
<Grid>
<TreeView Name="TreeData"
Width="236"
Height="311"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<TreeView.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type TreeViewItem}}" TargetType="TreeViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!--
Note that the following do not work, but I believe the top 2 should?!
<ToggleButton IsChecked="{TemplateBinding IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Property=IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Path=IsExpanded}" ClickMode="Press" Name="Expander">
-->
<ToggleButton Name="Expander"
ClickMode="Press"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable" Value="false" />
<Setter Property="FrameworkElement.Width" Value="16" />
<Setter Property="FrameworkElement.Height" Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Width="16"
Height="16"
Background="#00FFFFFF"
Padding="5,5,5,5">
<Path Name="ExpandPath"
Fill="#00FFFFFF"
Stroke="#FF989898">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="ExpandPath" Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#FF595959" />
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
Grid.Column="1"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
SnapsToDevicePixels="True">
<ContentPresenter x:Name="PART_Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentSource="Header"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded" Value="False">
<Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected" Value="True">
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
<Button Name="BtnLoad"
Width="75"
Height="23"
Margin="277,12,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Click="OnBtnLoad"
Content="Load data" />
</Grid>
</Window>
This is very easy. In the button click handler I add new Items to the
TreeView. This is the code:
private void OnBtnLoad(object sender, RoutedEventArgs e)
{
var count = this.TreeData.Items.Count.ToString();
var parent = new TreeViewItem() { Name = "Name_" + count, Header = "Header_" + count };
this.TreeData.Items.Add(parent);
var child0 = new TreeViewItem() { Name = "Name_" + count + "_0", Header = "Header_" + count + "_0" };
var child1 = new TreeViewItem() { Name = "Name_" + count + "_1", Header = "Header_" + count + "_1" };
var child2 = new TreeViewItem() { Name = "Name_" + count + "_2", Header = "Header_" + count + "_2" };
parent.Items.Add(child0);
parent.Items.Add(child1);
parent.Items.Add(child2);
parent.Items.Refresh();
}
If you put the style further up the visual tree it would affect the items and subitems in the treeview. For example you could put the style in Grid.Resources or in Window.Resources instead of having it in the TreeView.ItemContainerStyle as you do now.
I have custom ContentControl called TabItem
public class TabItem : ContentControl
I have set the ContentTemplate to a dynamic resource coming from a resource dictionary
<TabItem Header="Search" Content="{Binding Path=SearchRibbon}" ContentTemplate="{DynamicResource SearchRibbonTemplate}" />
Using this approach I am utilizing the MVVM design pattern and the Content property successfuly binds to the viewmodel's... and the program builds successfuly and runs but without the content from within the datatemplate that the contenttemplate should be pulling in.
<DataTemplate x:Key="SearchRibbonTemplate">
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TabGroupBox Header="{Binding Path=DisplayName}" Width="100">
<TabButton Width="100" Icon="{Binding Path=TemplateResource}" LargeIcon="{Binding Path=TemplateResource}" Command="{Binding Path=Commands}" />
</TabGroupBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
If I use a content control as it is, this approach has always worked. Why wouldn't a custom contentcontrol not work with the ContentTemplate property?
Cheers.
EDIT
<Style x:Key="RibbonTabItemStyle" TargetType="{x:Type Ribbon_Framework:TabItem}">
<Style.Triggers>
<Trigger Property="Group" Value="{x:Null}">
<Setter Property="BorderBrush" Value="{StaticResource RibbonTopBorderBrush}" />
</Trigger>
<Trigger Property="Selector.IsSelected" Value="False">
<Setter Property="Foreground" Value="{StaticResource TabItemFontBrush}" />
</Trigger>
</Style.Triggers>
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Height" Value="31" />
<Setter Property="IsMinimized" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Ribbon_Framework:RibbonTabControl}}, Path=IsMinimized, Mode=OneWay, FallbackValue=False}" />
<Setter Property="IsOpen" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Ribbon_Framework:RibbonTabControl}}, Path=IsDropDownOpen, Mode=OneWay, FallbackValue=True}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Ribbon_Framework:TabItem}">
<Grid x:Name="grid" Background="#00000000" Height="24" VerticalAlignment="Top" Margin="0,7,0,0">
<Border x:Name="border3" Margin="2,0,0,1" BorderThickness="1,0" Grid.ColumnSpan="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CCFFFFFF" Offset="0" />
<GradientStop Offset="1" Color="#7FFFFFFF" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border x:Name="border4" BorderBrush="{Binding Group.BorderBrush, RelativeSource={RelativeSource TemplatedParent}}" BorderThickness="1,0">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="#00000000" Offset="0.981" />
</LinearGradientBrush>
</Border.OpacityMask>
<Border Background="{Binding Group.Background, RelativeSource={RelativeSource TemplatedParent}}" BorderThickness="0" Margin="0">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#59000000" Offset="0" />
<GradientStop Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Border.OpacityMask>
<Rectangle x:Name="rectangle4" Fill="#3FD2D2D2" StrokeThickness="0">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7F000000" Offset="0" />
<GradientStop Color="#00000000" Offset="1" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Border>
</Border>
</Border>
<Grid x:Name="selectedGrid" Visibility="Collapsed" Margin="2,0,0,0" Grid.ColumnSpan="1">
<Rectangle x:Name="rectangle" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{x:Null}" StrokeThickness="0" Margin="0" VerticalAlignment="Bottom" Height="1" />
<Rectangle x:Name="rectangle1" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{x:Null}" StrokeThickness="0" Margin="1.8,0" VerticalAlignment="Bottom" Height="1.2" />
<Rectangle x:Name="rectangle2" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{x:Null}" StrokeThickness="0" Margin="2,0" VerticalAlignment="Bottom" Height="2" />
<Border x:Name="border" Margin="1,0,1,2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ActiveTabBackgroundBrush}">
<Border x:Name="border_Copy3" Margin="0" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{x:Null}" BorderBrush="{StaticResource ActiveTabBackgroundBrush}">
<Border x:Name="border_Copy4" Margin="0,0,-2,-1" BorderThickness="0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{Binding Group.Background, RelativeSource={RelativeSource TemplatedParent}}" BorderBrush="{x:Null}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#3F000000" Offset="0" />
<GradientStop Color="#00000000" Offset="0.59" />
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
</Border>
</Border>
<Border x:Name="border1" HorizontalAlignment="Left" Margin="0" VerticalAlignment="Bottom" Width="2" Height="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" CornerRadius="0,0,2,0" />
<Border x:Name="border2" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Bottom" Width="2" Height="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,0,1" CornerRadius="0,0,0,2" />
<Rectangle x:Name="rectangle3" StrokeThickness="0" Margin="7,-7,7,0" VerticalAlignment="Top" Height="14" IsHitTestVisible="False">
<Rectangle.Fill>
<RadialGradientBrush Center="0.498,0.501" GradientOrigin="0.498,0.501" RadiusY="0.464">
<GradientStop Color="#7FFFFFFF" Offset="0" />
<GradientStop Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<Grid x:Name="hoverGrid" Margin="2,0,0,0" Visibility="Collapsed" Grid.ColumnSpan="1">
<Border x:Name="border_Copy" Margin="1,0,1,1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{x:Null}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CC000000" Offset="0" />
<GradientStop Color="#F7FFFFFF" Offset="0.985" />
</LinearGradientBrush>
</Border.OpacityMask>
<Border x:Name="border_Copy1" Margin="0" BorderBrush="{StaticResource ActiveTabBackgroundBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{x:Null}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#CCFFFFFF" Offset="0" />
<GradientStop Color="#F7FFFFFF" Offset="1" />
</LinearGradientBrush>
</Border.OpacityMask>
<Border x:Name="border_Copy2" Margin="0" BorderBrush="{x:Null}" BorderThickness="0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ActiveTabBackgroundBrush}">
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7FFFFFFF" Offset="0.004" />
<GradientStop Offset="0.5" />
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
</Border>
</Border>
</Grid>
<Grid x:Name="focusedGrid" Margin="2,0,0,0" Visibility="Collapsed" Grid.ColumnSpan="1">
<Grid.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Offset="1" Color="#19FFFFFF" />
</LinearGradientBrush>
</Grid.OpacityMask>
<Border x:Name="border_Copy5" Margin="1,0,1,1" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ButtonHoverOuterBackgroundBrush}" BorderBrush="{StaticResource ButtonHoverOuterBorderBrush}">
<Border x:Name="border_Copy6" Margin="0" BorderBrush="{StaticResource ButtonHoverInnerBorderBrush}" BorderThickness="1,1,1,0" VerticalAlignment="Stretch" CornerRadius="2,2,0,0" Background="{StaticResource ButtonHoverInnerBackgroundBrush}" />
</Border>
</Grid>
<Border x:Name="PART_ContentContainer" HorizontalAlignment="Stretch" Margin="6,2,4,2" VerticalAlignment="Stretch" Padding="15,0,0,0" Grid.ColumnSpan="1">
<Label x:Name="contentPresenter" AutomationProperties.Name="{TemplateBinding Header}" AutomationProperties.AutomationId="{TemplateBinding Name}" Content="{TemplateBinding Header}" Margin="0, -3, 0,0" HorizontalAlignment="Center" VerticalAlignment="Center" Height="Auto" />
</Border>
<Grid x:Name="separatorGrid" Margin="0" Visibility="Collapsed" HorizontalAlignment="Right" Width="2" Grid.Column="1">
<Rectangle x:Name="separatorRectangle1" Fill="{StaticResource RibbonTopBorderBrush}" Stroke="{StaticResource RibbonTopBorderBrush}" Margin="0,0,1,0" HorizontalAlignment="Right" Width="1" Opacity="1" Visibility="Visible">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#E5FFFFFF" Offset="0.382" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
<Rectangle x:Name="separatorRectangle2" Fill="{StaticResource ActiveTabBackgroundBrush}" Stroke="{StaticResource ActiveTabBackgroundBrush}" HorizontalAlignment="Right" Margin="0" Width="1" Opacity="1" Visibility="Visible">
<Rectangle.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#BFFFFFFF" Offset="0.329" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="contentPresenter" Value="0.5" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasRightGroupBorder" Value="False" />
<Condition Property="HasLeftGroupBorder" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" TargetName="border3" Value="1,0,0,0" />
<Setter Property="BorderThickness" TargetName="border4" Value="1,0,0,0" />
<Setter Property="Margin" TargetName="rectangle4" Value="0" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasLeftGroupBorder" Value="False" />
<Condition Property="HasRightGroupBorder" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" TargetName="border4" Value="0,0,1,0" />
<Setter Property="BorderThickness" TargetName="border3" Value="0,0,1,0" />
<Setter Property="Margin" TargetName="rectangle4" Value="0" />
<Setter Property="Margin" TargetName="border3" Value="0,0,0,1" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasLeftGroupBorder" Value="False" />
<Condition Property="HasRightGroupBorder" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="BorderThickness" TargetName="border4" Value="0,0,0,0" />
<Setter Property="BorderThickness" TargetName="border3" Value="0,0,0,0" />
<Setter Property="Margin" TargetName="rectangle4" Value="0" />
<Setter Property="Margin" TargetName="border3" Value="0,0,0,1" />
</MultiTrigger>
<Trigger Property="Group" Value="{x:Null}">
<Setter Property="Visibility" TargetName="border3" Value="Collapsed" />
<Setter Property="Margin" TargetName="separatorGrid" Value="-1,0,0,1" />
<Setter Property="Visibility" TargetName="border_Copy3" Value="Collapsed" />
<Setter Property="Visibility" TargetName="rectangle3" Value="Collapsed" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected" Value="True" />
<Condition Property="IsMinimized" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="selectedGrid" Value="Visible" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="Selector.IsSelected" Value="False" />
<Condition Property="IsMinimized" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="hoverGrid" Value="Visible" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsMinimized" Value="True" />
<Condition Property="IsOpen" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="hoverGrid" Value="Visible" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected" Value="True" />
<Condition Property="IsMinimized" Value="True" />
<Condition Property="IsOpen" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="hoverGrid" Value="Visible" />
<Setter Property="Background" TargetName="grid" Value="#00000000" />
</MultiTrigger>
<Trigger Property="IsSeparatorVisible" Value="True">
<Setter Property="Visibility" TargetName="separatorGrid" Value="Visible" />
<Setter Property="Margin" TargetName="PART_ContentContainer" Value="6,2" />
<Setter Property="Margin" TargetName="hoverGrid" Value="2,0" />
<Setter Property="Margin" TargetName="selectedGrid" Value="2,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Indent" Value="12" />
<Setter Property="Foreground" Value="{StaticResource TabItemSelectedFontBrush}" />
<Setter Property="FontFamily" Value="{StaticResource DefaultFontFamily}" />
<Setter Property="FontSize" Value="{StaticResource DefaultFontSize}" />
<Setter Property="Margin" Value="0" />
<Setter Property="BorderBrush" Value="{Binding Group.BorderBrush, RelativeSource={RelativeSource Self}}" />
<Setter Property="FocusVisualStyle" Value="{StaticResource ControlStyleEmptyFocus}" />
</Style>
My guess would be that you did not define a default style for the control in Themes/Generic.xaml which should set the Template of the control to at least contain a ContentPresenter.
e.g.
<Style TargetType="local:TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:TabItem">
<!-- Usually there is also a Border which template binds the Margin, Padding, etc. -->
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After correspondence with one of the developers that build the Fluent Ribbon library that I'm revamping, he noted that in order to achieve this design it will take more then just modifying the ContentPresenter and a full rework would be necessary. This being the case, he had suggested that building a list of ViewModels that derrive from each other's control will provide the design I am look for.
Thanks for everyones answers, but the difficult way seems to be the easy way in this scenario.
Cheers.