I defined the following resources:
<DataTemplate x:Key="DragTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label x:Name="DraggingSourceLabel" Content="{Binding Name}" BorderThickness="2" BorderBrush="White" Foreground="White" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Grid.Row="0" Grid.Column="0" FontSize="20"></Label>
</Grid>
</DataTemplate>
<Style x:Key="CursorStyle" TargetType="{x:Type ContentControl}">
<Setter Property="Opacity" Value="0.50"/>
<Setter Property="Background" Value"Black"/>
<Setter Property="ContentTemplate" Value="{StaticResource DragTemplate}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}">
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Tag" Value="DragEnter">
<Setter Property="Opacity" Value="1.0"/>
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</s:SurfaceWindow.Resources>
But unfortunately, the StyleTriggers aren't working how I thought. The Opacity is changed, but the Background is still the same. I also tried it with only one setter, but the background still didn't changed:
<Style.Triggers>
<Trigger Property="Tag" Value="DragEnter">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
What's the problem here?
===EDIT===
Here the code I use to get the ContentControl:
ContentControl cursorVisual = new ContentControl()
{
Content = data,
Style = window.FindResource("CursorStyle") as Style
};
List<InputDevice> devices = new List<InputDevice>();
devices.Add(e.Contact);
ItemsControl dragSource = ItemsControl.ItemsControlFromItemContainer(draggedElement);
bool startDragOkay = SurfaceDragDrop.BeginDragDrop(sender as Grid, draggedElement, cursorVisual, data, devices, DragDropEffects.Move);
if (startDragOkay)
{
e.Handled = true;
//draggedElement.Visibility = Visibility.Hidden;
}
Style can't set Background because this property, unlike Opacity, isn't exist in a FrameworkElement class. Properties of a Framework element may be used out of the box, but properties of a Control (such as Background, BorderThickness, HorizontalContentAlignment) should be defined inside a template.
Here is a correct version, I've added a border with background:
<ControlTemplate TargetType="{x:Type ContentControl}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}">
</ContentPresenter>
</Border>
</ControlTemplate>
Related
I am trying to achieve something that's driving me nuts, it partially works, but I can't achieve the same results that I did on my old Winforms project(I am trying to learn WPF and move away from Winforms).
I am trying to paint a Button if I place the mouse over it, so it change the background color and add a yellow rectangle on the left like this:
I tried to create with much difficulty a Styled button that partially do the job, it changes the background color but I can't figure out how to paint the yellow rectangle
<Style x:Key="MenuButton" TargetType="Button">
<Setter Property="Button.Background" Value="#525864"/>
<Setter Property="Button.Foreground" Value="#ffffff" />
<Setter Property="Button.BorderThickness" Value="0"/>
<Setter Property="Button.Margin" Value="10,0,0,0"/>
<Setter Property="Button.Height" Value="40"/>
<Setter Property="Button.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
**
<Setter Property="Rectangle.Fill" Value="#f0e68c"/> **
<Setter Property="Button.Background" Value="#737b8c"/>
</Trigger>
</Style.Triggers>
</Style>
From the main Window I created the button like this:
<Button Style="{StaticResource MenuButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="10"/>
<TextBlock Grid.Column="1" Text="Comparador Archivos" Margin="5,0,0,0"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Image Grid.Column="2" Margin="5" Source="/Imagenes/icono_comparar.png"/>
</Grid>
</Button>
Because the Content in the ContentPresenter is set on the UI, the style does not know the existence of the Rectangle. Therefore, to access the Rectangle, you need to insert <Grid> ~ </Grid> directly instead of <ContentPresenter/>.
And in Style.Trigger, objects in the ControlTemplate is not accessible.
Therefore, it must be processed within ControlTemplate.Triggers.
By giving x:name to the Rectangle, internal properties can be accessed in Trigger.
<Style x:Key="MenuButton" TargetType="Button">
<Setter Property="Background" Value="#525864"/>
<Setter Property="Foreground" Value="#ffffff" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="10,0,0,0"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="rec" Grid.Column="0" Width="10"/>
<TextBlock Grid.Column="1" Text="Comparador Archivos" Margin="5,0,0,0"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Image Grid.Column="2" Margin="5" Source="/Imagenes/icono_comparar.png"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="rec" Property="Fill" Value="#f0e68c"/>
<Setter Property="Background" Value="#737b8c"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Style="{StaticResource MenuButton}"/>
Cant you just change the fill hex so one of these
<Setter TargetName="rec" Property="Fill" Value="#f0e68c"/> <Setter Property="Background" Value="#737b8c"/>
Change the hex of Value="#hexcode"
Tell me if it works
I found this code on doing rounded corners on combobox, I have modifyed it a little, but I have two Issues:
1) The mouseover on the combobox (textbox + togglebutton) won't
work. (I want the standard bahavior with blue background on mouseover, put red just to see if something happend)
2) when I click on the togglebutton I get the popup, but how can I make the textbox clickable to get the popup?
This is what I get:
This is what I want when mouseover (but with rounded corner)
Here are the code:
<Style x:Key="BorderStyle">
<Setter Property="Control.BorderBrush" Value="#A0A1A2" />
<Setter Property="Control.BorderThickness" Value="1" />
<Setter Property="Control.Background" Value="Transparent" />
<Setter Property="Control.Foreground" Value="#101010" />
<Setter Property="Control.FontFamily" Value="Arial" />
<Setter Property="Control.FontWeight" Value="Normal" />
<Setter Property="Control.FontStretch" Value="Normal" />
<Setter Property="Control.FontStyle" Value="Normal" />
</Style>
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="#EAEAEA"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
IsHitTestVisible="False"
Height="{TemplateBinding Height}"
BorderBrush="#A0A1A2"
Background="#EAEAEA"
Style="{StaticResource ComboBoxTextBoxStyle}"/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"/>
<Popup Grid.Column="0"
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
There were a few problems here. Each item I changed in the XAML is commented.
I've also removed the IsMouseOver triggers from the togglebutton and textbox styles, and put it in the ComboBox style. It now sets the background for the whole combobox when the mouse is anywhere over the ComboBox. The two controls in the ComboBox template now have Background="{TemplateBinding Background}", so they'll use the background color set by that trigger.
I've restored IsHitTestVisible on the textbox, but used a TemplateBinding to bind it to the ComboBox's IsEditable property. This will give you the correct mouse pointer over the textbox.
<!--
Better to define this in one place.
I'd do the same with the border color that you use everywhere.
-->
<SolidColorBrush x:Key="ComboBackgroundBrush" Color="#EAEAEA" />
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<!--
Must set this in a setter, not an an attribute on the control instance.
The attribute you had will override anything the style does. This is part of
"dependency property value precedence".
-->
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="2,0,0,2"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="#A0A1A2"
>
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="{StaticResource ComboBackgroundBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!--
Needs {TemplateBinding Background} so it uses whatever background brush
the control has at any given moment.
-->
<Border Background="{TemplateBinding Background}"
x:Name="border"
CornerRadius="0,2,2,0"
BorderThickness="0,1,1,1"
BorderBrush="#A0A1A2">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxOverlayToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="ClickMode" Value="Press" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource BorderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontSize" Value="14px"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<ToggleButton
Grid.Column="0"
Style="{StaticResource ComboBoxOverlayToggleButtonStyle}"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
/>
<!--
Two problems:
1. IsHitTestVisible="False" prevented it from getting any mouse messages.
2. Background attribute was overriding anything the Style did,
so even if the trigger had fired, its setter would have failed.
Also, Height="{TemplateBinding Height}" is unnecessary. It'll size to its parent Grid.
And BorderBrush="#A0A1A2" should probably be in the Style
-->
<TextBox Name="PART_EditableTextBox"
Padding="0,0,0,0"
BorderBrush="#A0A1A2"
Style="{StaticResource ComboBoxTextBoxStyle}"
Background="{TemplateBinding Background}"
IsHitTestVisible="{TemplateBinding IsEditable}"
/>
<ToggleButton Grid.Column="1"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Background="{TemplateBinding Background}"
>
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="Black" />
</ToggleButton>
<ContentPresenter Grid.Column="0"
Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,0,0,0"
/>
<Popup Grid.Column="0"
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
BorderThickness="1"
CornerRadius="2"
Background="White"
BorderBrush="#A0A1A2"/>
<ScrollViewer SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
Designers hate developers that why they create so weard designs!))
So my task is to create xaml UI from psd file. I'm finishing it but I don't know how to remove line in selected tabItem. Lood at the pictures.
That's what I need to get.
That's what I got.
How can I remove this this line? Is It possible without hard-coding?
Here's code of my tab control.
<TabControl.Resources>
<Style TargetType="TabControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border
Name="Border"
Grid.Row="0"
BorderBrush="{StaticResource SolidBrush_Blue}"
BorderThickness="{TemplateBinding BorderThickness}"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
ContentSource="SelectedContent">
</ContentPresenter>
</Border>
<TabPanel
Name="HeaderPanel"
Grid.Row="1"
Panel.ZIndex="1"
HorizontalAlignment="Center"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- SimpleStyles: TabItem -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid
x:Name="grid">
<Border
Name="Border"
Margin="5,0,5,0"
Padding="30 15 30 15"
CornerRadius="0 0 3 3"
BorderBrush="{StaticResource SolidBrush_Blue}"
BorderThickness="2 0 2 2" >
<ContentPresenter
x:Name="contentPresenter"
VerticalAlignment="Center"
ContentSource="Header"
TextBlock.Foreground="White"
TextBlock.FontFamily="{StaticResource FontFamilyRegular}"
RecognizesAccessKey="True">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border"
Property="Background"
Value="White" />
<Setter TargetName="contentPresenter"
Property="TextBlock.FontFamily"
Value="{StaticResource FontFamilyBold}"/>
<Setter TargetName="contentPresenter"
Property="TextBlock.Foreground"
Value="{StaticResource SolidBrush_Blue}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource SolidBrush_Blue}" />
<Setter TargetName="contentPresenter"
Property="TextBlock.Background"
Value="White"/>
<Setter TargetName="contentPresenter"
Property="TextBlock.FontFamily"
Value="{StaticResource FontFamilyRegular}"/>
<Setter TargetName="contentPresenter"
Property="TextBlock.Foreground"
Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
in TabItem Template for border Border set Margin="5,-1,5,0". The border will move up and hide a borderline of TabControl with default thickness of 1
I want to make my custom tab control style. Headers should be on the left side and the content on the right side. Just like the standard styles can do it:
The selected element on the image above is the grid inside the active item. As you can see, it perfectly aligns next to the headers.
This is my design. The selected element is also the grid inside the active item, but it is just behind the headers instead of next to them. How can I align this grid next to the headers?
These are my styles for the tab item and tab control:
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="AliceBlue" />
<Border
Name="Border"
Grid.Row="1"
BorderThickness="0"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0"
Padding="10,4,4,4"
Background="Transparent"
Height="30"
Width="Auto"
BorderThickness="0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Left"
ContentSource="Header"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="#FFFFFFFF" />
<Setter TargetName="Border" Property="BorderBrush" Value="#FF4576a9"></Setter>
<Setter TargetName="Border" Property="BorderThickness" Value="6, 0, 0, 0"></Setter>
<Setter TargetName="Border" Property="Padding" Value="4"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="Yellow" />
<Setter Property="Foreground" Value="Orange" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you.
In your Custom Template, you need to set Grid.Column instead of Grid.Row since your grid is now 2 cols/1 row instead of 1 col/2 rows
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ...>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabPanel
Name="HeaderPanel" Grid.Column="0" ... />
<Border Name="Border" Grid.Column="1" ... >
<ContentPresenter ... />
</Border>
</Grid>
</ControlTemplate>
You need not to create a custom control. You can use TabStripPlacement property of tabcontrol to achieve this functionality.
<TabControl TabStripPlacement="Left">
<TabItem Header="Tab1">
</TabItem>
<TabItem Header="Tab2">
</TabItem>
</TabControl>
You can refer http://www.wpf-tutorial.com/tabcontrol/tab-positions/ or https://msdn.microsoft.com/en-us/library/system.windows.controls.tabcontrol.tabstripplacement(v=vs.110).aspx
I am using AvalonDock in a project and would like to use the Anchorable Pane, but instead of the tab appearing at the bottom, I would like it to appear at the top like it does on a Document Pane. For my project, a Document Pane is not the appropriate control, so I need to find a way to make the Anchorable Pane appear in the same way.
According to Issue Ticket found on CodePlex there is a bug that prevents changing the TabStripPlacement to the top. The way to achieve this is to replace the existing style with one like this:
<Style x:Key="MyCustomAnchorablePaneControlStyle" TargetType="{x:Type xcad:LayoutAnchorablePaneControl}">
<Setter Property="TabStripPlacement" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xcad:LayoutAnchorablePaneControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--Following border is required to catch mouse events-->
<Border Background="Transparent" Grid.RowSpan="2"/>
<xcad:AnchorablePaneTabPanel x:Name="HeaderPanel" Margin="2,0,2,2" IsItemsHost="true" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Cycle">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type TabItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
<Setter Property="ToolTip" Value="{Binding ToolTip}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}, Path=Items.Count}" Value="1">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<xcad:LayoutAnchorableTabItem Model="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<xcad:LayoutAnchorableControl Model="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>