Develop Reference

WinUI 3 ComboBox Header is On Top of Control

When I use the Header property, the header rests on over the ComboBox so that the ComboBox is hidden behind the header, making the ComboBox unusable.
<ComboBox x:Name="DataGridFilter" Header="Filter By" Grid.Row="0" Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
I found this, but there is no example of how the resource can be used to move the header to be above the ComboBox (you'd think it did that by default). I also checked the grid row that contains this ComboBox, and there should be plenty of height for both the header and ComboBox.
How can I relocate the header so that it is vertically higher or to the left of the ComboBox?

As #Junjie Zhu mentions in the comments, you might want to reinstall the latest WindowsAppSDK.
If you need to locate the Header, let's say to the left side, this is an example for it.
Note: The default style comes from the default generic.xaml file. (This answer shows you how to find the generic.xaml file.)
MainPage.xaml
<Page
x:Class="ComboBoxTests.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:ComboBoxTests"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">
<Page.Resources>
<Style
BasedOn="{StaticResource DefaultComboBoxStyle}"
TargetType="ComboBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid x:Name="LayoutRoot">
<Grid.Resources>
...
</Grid.Resources>
<Grid.RowDefinitions>
<!-- This is for the "Header". We won't need this. But we need to change each Grid.Column and Grid.Row of the controls to move the Header to the left.
<RowDefinition Height="Auto" />
-->
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="38" />
</Grid.ColumnDefinitions>
<!-- This ContentPresenter is for the Header. -->
<ContentPresenter
x:Name="HeaderContentPresenter"
Grid.Row="0"
Grid.Column="0"
Margin="{ThemeResource ComboBoxTopHeaderMargin}"
VerticalAlignment="Top"
x:DeferLoadStrategy="Lazy"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FlowDirection="{TemplateBinding FlowDirection}"
FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
Foreground="{ThemeResource ComboBoxHeaderForeground}"
LineHeight="20"
TextWrapping="Wrap"
Visibility="Collapsed" />
<Border
x:Name="HighlightBackground"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="-4"
Background="{ThemeResource ComboBoxBackgroundFocused}"
BorderBrush="{ThemeResource ComboBoxBackgroundBorderBrushFocused}"
BorderThickness="{StaticResource ComboBoxBackgroundBorderThicknessFocused}"
CornerRadius="{StaticResource ComboBoxHiglightBorderCornerRadius}"
Opacity="0" />
<Border
x:Name="Background"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
MinWidth="{ThemeResource ComboBoxThemeMinWidth}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True"
CornerRadius="{TemplateBinding CornerRadius}"
Translation="0,0,1" />
<Rectangle
x:Name="Pill"
Grid.Row="0"
Grid.Column="1"
Margin="1,0,0,0"
Opacity="0"
Style="{StaticResource ComboBoxItemPill}">
<Rectangle.RenderTransform>
<CompositeTransform
x:Name="PillTransform"
ScaleY="1" />
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter
x:Name="ContentPresenter"
Grid.Row="0"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock
x:Name="PlaceholderTextBlock"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
Text="{TemplateBinding PlaceholderText}" />
</ContentPresenter>
<TextBox
x:Name="EditableText"
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,0,0,0"
Padding="{ThemeResource ComboBoxEditableTextPadding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Load="False"
AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
BorderBrush="Transparent"
CornerRadius="{TemplateBinding CornerRadius}"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
Header="{TemplateBinding Header}"
PlaceholderText="{TemplateBinding PlaceholderText}"
Style="{TemplateBinding TextBoxStyle}"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Visibility="Collapsed" />
<Border
x:Name="DropDownOverlay"
Grid.Row="0"
Grid.Column="2"
Width="30"
Margin="4,4,4,4"
HorizontalAlignment="Right"
x:Load="False"
Background="Transparent"
CornerRadius="{StaticResource ComboBoxDropDownButtonBackgroundCornerRadius}"
Visibility="Collapsed" />
<controls:AnimatedIcon
x:Name="DropDownGlyph"
Grid.Row="0"
Grid.Column="2"
Width="12"
Height="12"
MinHeight="{ThemeResource ComboBoxMinHeight}"
Margin="0,0,14,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
controls:AnimatedIcon.State="Normal"
AutomationProperties.AccessibilityView="Raw"
Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
IsHitTestVisible="False">
<animatedVisuals:AnimatedChevronDownSmallVisualSource xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals" />
<controls:AnimatedIcon.FallbackIconSource>
<controls:FontIconSource
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="12"
Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
Glyph="" />
</controls:AnimatedIcon.FallbackIconSource>
</controls:AnimatedIcon>
<ContentPresenter
x:Name="DescriptionPresenter"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
x:Load="False"
Content="{TemplateBinding Description}"
Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
<Popup x:Name="Popup">
...
</Popup>
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid
ColumnDefinitions="Auto,*"
RowDefinitions="Auto,*">
<ComboBox
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Header="Filter by"
ItemsSource="{x:Bind ViewModel.FilterList, Mode=OneWay}"
SelectedItem="{x:Bind ViewModel.SelectedFilter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</Page>

Set Textbox Focus within a Control Template

I have a control template that defines a custom floating text box.
It consists of a label, a border that serves as the visual boundary for the text box, and a text box inside that border.
The border of the text box itself is made invisible.
My problem is this: when the custom control is "tabbed" to in the UI, the control gets KeyboardFocus, but the Textbox itself does not. This causes the blinking cursor not to show.
I need to know how to pass focus to the Textbox contained within the border, named DisplayText, from a trigger in the control template.
I tried using the FocusManager to set DisplayText to be the focused element, but that didn’t work.
Any ideas, thoughts or advice would be much appreciated. If you need any more information, please let me know.
Control Template:
<Grid SnapsToDevicePixels="True"
UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label x:Name="floatingLabel"
Template="{DynamicResource LabelControlTemplate1}"
Content="{Binding LabelText, RelativeSource={RelativeSource Mode=TemplatedParent}}"
IsHitTestVisible="False"
Panel.ZIndex="2"
Background="White"
Height="15"
VerticalContentAlignment="Center"
Padding="3,0,3,0"
HorizontalAlignment="Left"
FontFamily="Segoe UI"
FontSize="{Binding LabelFontSize, RelativeSource={RelativeSource TemplatedParent}}"
Foreground="{DynamicResource FloatingLabelTextBox.Label.Foreground}"
VerticalAlignment="Center">
<Label.Tag>
<sys:Double>0.0</sys:Double>
</Label.Tag>
<Label.Margin>
<MultiBinding Converter="{StaticResource floatingLabelMarginConverter}">
<Binding Path="Tag"
RelativeSource="{RelativeSource Self}" />
<Binding ElementName="Border"
Path="ActualHeight" />
</MultiBinding>
</Label.Margin>
</Label>
<Border x:Name="Border"
Height="{Binding TextBoxHeight, RelativeSource={RelativeSource TemplatedParent}}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="3"
SnapsToDevicePixels="True"
Panel.ZIndex="0"
VerticalAlignment="Bottom">
<Grid x:Name="GridContainer" Width="{Binding ElementName=Border, Path=ActualWidth}" Margin="10,0,0,0">
<TextBox x:Name="DisplayText"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FormattedPhoneNumber, StringFormat={}{0:(###)###-####}, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="{TemplateBinding Foreground}"
Width="{Binding ElementName=Border, Path=ActualWidth}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer x:Name="PART_ContentHost"
HorizontalAlignment="Stretch"
Margin="{TemplateBinding Padding}"
Uid="ScrollViewer_1"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
</Border>
</Grid>
Trigger:
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="FocusManager.FocusedElement" Value="{Binding ElementName=DisplayText}" />
</Trigger>

Try adding Focusable="False" to the Label.
I tried to copy your XAML into a Window and run it, but there's obviously a bunch of other stuff that I would need in order to get it to work.

Show Border on avalonEdit:TextEditor

I am trying to get a border to show around an avalonEdit 'box' in a Wpf control but can't seem to make it happen.
I added BorderBrush="Black" BorderThickness="2" but clearly I am missing something.
I've googled but, despite my endeavors, I cannot find anything - I suspect I may not know the correct terminology to Google for because it feels like it should be straightforward!
Code as follows:
<Label Content="Account:" HorizontalAlignment="Left" Margin="10,28,0,0" VerticalAlignment="Top"/>
<TextBox Name ="textBoxAccount" HorizontalAlignment="Left" Height="23" Margin="66,28,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120"/>
<Label Content="Query:" HorizontalAlignment="Left" Margin="10,59,0,0" VerticalAlignment="Top"/>
<Button x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="10,342,0,0" VerticalAlignment="Top" Width="146"/>
<avalonEdit:TextEditor
xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit"
x:Name="textEditor"
FontFamily="Consolas"
SyntaxHighlighting="AWQL"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
WordWrap="True"
Visibility="Visible"
BorderBrush="Black" BorderThickness="2"
FontSize="10pt" Margin="12,89.96,10,0" Height="229" VerticalAlignment="Top"/>
</Grid>
which renders like this:
but the 'avalonEdit' box doesn't seem to render the border so looks invisible unless/until a user clicks inside it and starts typing.
I'd really like the border to look the same as the simple textbox at the top of the user control but right now I'd settle for anything visible!

I only worked once with avalon before so I cooked up a quick project which does what you want.
As a disclaimer, AvalonEdit seems to ruin any attempt to put a border around it like you said. So I set it up using a grid to put a border around it.
It will look something like this:
And the code will look like this:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="600" Height="500"
xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Account:" HorizontalAlignment="Left" Margin="20,20" VerticalAlignment="Top" Height="26" Width="56" />
<TextBox Grid.Column="1" Grid.Row="0" Name="textBoxAccount" HorizontalAlignment="Left" Height="26" Margin="20" TextWrapping="Wrap"
VerticalAlignment="Top" Width="120" />
<Label Grid.Column="0" Grid.Row="1" Content="Query:" HorizontalAlignment="Left" Margin="20,0" VerticalAlignment="Top" Height="26" Width="45" />
<Border Grid.ColumnSpan="2"
Grid.Row="2"
Grid.Column="0" BorderBrush="Black" BorderThickness="1"
Margin="20"
Height="230">
<avalonEdit:TextEditor
x:Name="textEditor"
FontFamily="Consolas"
SyntaxHighlighting="AWQL"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
WordWrap="True"
Visibility="Visible"
FontSize="10pt" VerticalAlignment="Top" Height="226"/>
</Border>
<Button Grid.Column="0" Grid.Row="3" x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="20"
VerticalAlignment="Top" Width="146" />
</Grid>
This is not exactly what you want, but a grid will help with other issues as well in the long run

This is the avalonEdit:TextEditor style (TextEditor.xaml):
<Style TargetType="{x:Type AvalonEdit:TextEditor}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="FlowDirection" Value="LeftToRight"/> <!-- AvalonEdit does not support RTL, so ensure we use LTR by default -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
<ScrollViewer
Focusable="False"
Name="PART_ScrollViewer"
CanContentScroll="True"
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextArea}"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
/>
<ControlTemplate.Triggers>
<Trigger Property="WordWrap"
Value="True">
<Setter TargetName="PART_ScrollViewer"
Property="HorizontalScrollBarVisibility"
Value="Disabled" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is an explanation about why ScrollViewer doesn't show borders: https://social.msdn.microsoft.com/Forums/vstudio/en-US/a2310302-167b-44e2-bc23-825ff1610701/scrollviewer-border
So, I think the best way is to wrap the TextEditor inside a Border as Guerudo says or modify the template in Avalon code TextEditor.xaml.

I didn't work with avalonEdit but I can suggest you an other way : you could wrap your TextEditor inside a <Border> </Border>.
It's probably not the best solution but it is one.

The AvalonEdit community nicely fixed this problem by changing the TextEditor style from the project:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer
Focusable="False"
Name="PART_ScrollViewer"
CanContentScroll="True"
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextArea}"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
Padding="{TemplateBinding Padding}"
/>
</Border>

How to change height of slider control in windows phone?

It must be simple but I can't figure it out. How to change the height of slider control in windows phone? No matter how large value I set for Height it remains as it is
<Slider Width="100" Height="600" />

Open the page in Expression Blend
Right click on Slider Control on Page .
Select Edit Template and Select Edit Current/ Edit a copy as you wish.
Change width values in Scale sub tab of Render Tab for the properties HorizontalTrack, HorizontalFill,HorizontalThumb in Expression Blend
and you will see the difference.
Save the page and get back to Visual Studio and your custom template will be added to page resources.
I have attached the image for Expression Blend .
And the result will be like
Template code :- which might be of help for you.
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
<Style x:Key="SliderStyle1" TargetType="Slider">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid Background="Transparent">
<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleY="2.9"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleY="2.9"/>
</Rectangle.RenderTransform>
</Rectangle>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12" Margin="0,22,0,50" Width="12" RenderTransformOrigin="0.5,0.5">
<Thumb.RenderTransform>
<CompositeTransform ScaleY="4.65"/>
</Thumb.RenderTransform>
<Thumb.Template>
<ControlTemplate>
<Canvas Background="{StaticResource PhoneForegroundBrush}" Height="12" Width="12">
<Rectangle Fill="Transparent" Height="84" IsHitTestVisible="True" Canvas.Left="-24" Canvas.Top="-22" Width="60"/>
</Canvas>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And usage it in control like:-
<Slider Margin="0,49,56,348" HorizontalAlignment="Right" Width="360" Style="{StaticResource SliderStyle1}" />

Customized Content of TabItem WPF

I currently have a custom TabItem which has a custom header, which is defined as part of a Style like this:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type t:TwitterListTabItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Margin="0,-2,0,0" >
<Grid SnapsToDevicePixels="true">
<ContentPresenter x:Name="Content" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
<Button x:Name="PART_Close" HorizontalAlignment="Right" Margin="0" Padding="4" VerticalAlignment="Top" Width="16" Height="16" Style="{DynamicResource CloseableTabItemButtonStyle}" ToolTip="Close Tab">
<Path x:Name="Path" Stretch="Fill" StrokeThickness="0.5" Fill="#FFFFFF" Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Button>
<Button x:Name="PART_Number" HorizontalAlignment="Right" Padding="0" Margin="0" VerticalAlignment="Bottom" Width="16" Height="16" Style="{DynamicResource CloseableTabItemNumberStyle}" ToolTip="New Tweets" Content="{TemplateBinding NewTweetsNumber}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
.....Triggers Removed for Shortness....
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter
Now I want to set the template for the content area of the TabItem. I cannot work out how to do this. I have tried setting ContentTemplate, with a <ControlTemplate> containing a ListBox, but it didn't work.
So how do i define a template to control the content?
Thanks in advance

Use the TabItem.HeaderTemplate property for your tab header, and the TabItem.Template property for your tab's contents. Example.

Looks like you need one more ContentPresenter which displays the Content. And you already have a ContentPresenter which is displays Header.
<ContentPresenter ContentSource="Content"/>