Trying to have the text on each tab of the tabcontrol to be displayed vertically. Being that I've never forayed into controls and what not, i'm sorta stuck. Found some code to get the text to display as if it were rotated to the left. I would like it to display as if it were rotated right (vertically) on the tab. The skeleton code is below:
Protected Sub OnDrawItem(ByVal sender As Object, ByVal e As DrawItemEventArgs) Handles TabControl1.DrawItem
'MyBase.OnDrawItem(e)'
Dim tc As TabControl = DirectCast(sender, TabControl)
Dim g As Graphics = e.Graphics
Dim rectf As RectangleF
Dim isVertical As Boolean = (tc.Alignment > TabAlignment.Bottom)
Dim off As Integer = 1 : If (e.State And sel) = sel Then off = -1
Dim textFormat As New StringFormat(StringFormatFlags.NoClip _
Or StringFormatFlags.NoWrap)
With textFormat
.HotkeyPrefix = System.Drawing.Text.HotkeyPrefix.Show
.Alignment = StringAlignment.Center
.LineAlignment = StringAlignment.Center
End With
With e.Bounds
If isVertical Then
' tabs are aligned left or right'
If tc.Alignment = TabAlignment.Left Then
Dim m As New System.Drawing.Drawing2D.Matrix
m.Translate(0, .Height - tc.TabPages(0).Top)
m.RotateAt(270, New PointF(.X, .Y))
g.Transform = m
rectf = New RectangleF(.Left - tc.TabPages(0).Top, .Top + off, _
.Height, .Width)
ElseIf tc.Alignment = TabAlignment.Right Then
'Dim m As New System.Drawing.Drawing2D.Matrix'
'm.Translate(0, .Height - tc.TabPages(0).Top)'
'm.RotateAt(270, New PointF(.X, .Y))'
'g.Transform = m'
'rectf = New RectangleF(.Left - tc.TabPages(0).Top, .Top + off, _'
' .Height, .Width)'
' Here is where the tab should go to rotate the text about 180 degrees'
End If
Else
' tabs are aligned top or bottom'
rectf = New RectangleF(.X, .Y + off, .Width, .Height)
End If
End With
Dim col As Color
Select Case (e.State And notsf)
Case DrawItemState.Disabled
col = SystemColors.GrayText
Case DrawItemState.HotLight
col = SystemColors.HotTrack
Case Else
col = SystemColors.MenuText
End Select
g.DrawString(tc.TabPages(e.Index).Text, _
tc.Font, _
New SolidBrush(col), _
rectf, _
textFormat)
If isVertical Then g.ResetTransform()
If (e.State And selfoc) = selfoc Then
ControlPaint.DrawFocusRectangle(g, _
[Rectangle].Inflate(e.Bounds, -1, -1))
End If
textFormat.Dispose()
End Sub
I assume you are using XAML and this achievable through styles
Add these styles:
<!-- Simple Splitter Style -->
<Style x:Key="SimpleSplitterStyle" TargetType="controls:GridSplitter">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:GridSplitter">
<Grid x:Name="Root" IsHitTestVisible="{TemplateBinding IsEnabled}">
<Rectangle Fill="{TemplateBinding Background}" StrokeThickness="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Tab Item Header (Right) -->
<Style x:Key="RightTabItemHeader" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}">
<layout:LayoutTransformer >
<layout:LayoutTransformer.LayoutTransform>
<RotateTransform Angle="90"/>
</layout:LayoutTransformer.LayoutTransform>
<ContentPresenter Margin="5,0,5,0" />
</layout:LayoutTransformer>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Tab Item Header (Left) -->
<Style x:Key="LeftTabItemHeader" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}">
<layout:LayoutTransformer >
<layout:LayoutTransformer.LayoutTransform>
<RotateTransform Angle="-90"/>
</layout:LayoutTransformer.LayoutTransform>
<ContentPresenter Margin="5,0,5,0" />
</layout:LayoutTransformer>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Tab Item Style -->
<Style x:Key="TabItemStyle" TargetType="controls:TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:TabItem">
<Grid x:Name="Root">
<Grid x:Name="TemplateTopSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="-2,-2,-2,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,0,0,-2"/>
<ContentControl x:Name="HeaderTopSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualTop" Margin="-2,-2,-2,0" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1,1,1,0" CornerRadius="3,3,0,0"/>
<Border x:Name="DisabledVisualTopSelected" Margin="-2,-2,-2,0" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
</Grid>
<Grid x:Name="TemplateTopUnselected" Visibility="Collapsed">
<Border x:Name="BorderTop" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="3,3,0,0">
<Border x:Name="GradientTop" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,1,0,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderTopUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualTopUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,3,0,0"/>
</Grid>
<Grid x:Name="TemplateBottomSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="-2,0,-2,-2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,1,1" CornerRadius="0,0,3,3">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,0,1,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,-2,0,0"/>
<ContentControl x:Name="HeaderBottomSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualBottom" Margin="-2,0,-2,-2" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1,0,1,1" CornerRadius="0,0,3,3"/>
<Border x:Name="DisabledVisualBottomSelected" Margin="-2,0,-2,-2" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,0,3,3"/>
</Grid>
<Grid x:Name="TemplateBottomUnselected" Visibility="Collapsed">
<Border x:Name="BorderBottom" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="0,0,3,3">
<Border x:Name="GradientBottom" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,0,1,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderBottomUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualBottomUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,0,3,3"/>
</Grid>
<Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="-2,-2,0,-2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,0,0,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0,0,-2,0"/>
<ContentControl x:Name="HeaderLeftSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource LeftTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualLeft" Margin="-2,-2,0,-2" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3"/>
<Border x:Name="DisabledVisualLeftSelected" Margin="-2,-2,0,-2" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,0,0,3"/>
</Grid>
<Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed">
<Border x:Name="BorderLeft" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3,0,0,3">
<Border x:Name="GradientLeft" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="1,0,0,1">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderLeftUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource LeftTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualLeftUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="3,0,0,3"/>
</Grid>
<Grid x:Name="TemplateRightSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border Margin="0,-2,-2,-2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,1,1" CornerRadius="0,3,3,0">
<Border BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,1,1,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="-2,0,0,0"/>
<ContentControl x:Name="HeaderRightSelected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource RightTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualRight" Margin="0,-2,-2,-2" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="0,1,1,1" CornerRadius="0,3,3,0"/>
<Border x:Name="DisabledVisualRightSelected" Margin="0,-2,-2,-2" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,3,3,0"/>
</Grid>
<Grid x:Name="TemplateRightUnselected" Visibility="Collapsed">
<Border x:Name="BorderRight" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="0,3,3,0">
<Border x:Name="GradientRight" BorderBrush="#FFFFFFFF" BorderThickness="1" CornerRadius="0,1,1,0">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<ContentControl x:Name="HeaderRightUnselected" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Style="{StaticResource RightTabItemHeader}"/>
</Grid>
</Border>
</Border>
<Border x:Name="DisabledVisualRightUnSelected" IsHitTestVisible="false" Opacity="0" Background="#8CFFFFFF" CornerRadius="0,3,3,0"/>
</Grid>
<Border x:Name="FocusVisualElement" Margin="-1" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF6DBDD1" BorderThickness="1" CornerRadius="3,3,0,0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And Then you can assign this to each tab item:
<controls:TabControl TabStripPlacement="Right" Margin="4">
<controls:TabItem Header="First" Style="{StaticResource TabItemStyle}">
<controls:TreeView>
<controls:TreeViewItem Header="Parent 1" />
<controls:TreeViewItem Header="Parent 2">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
</controls:TreeViewItem>
</controls:TreeViewItem>
<controls:TreeViewItem Header="Parent 3">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
<controls:TreeViewItem Header="Grandchild 2" />
</controls:TreeViewItem>
</controls:TreeViewItem>
</controls:TreeView>
</controls:TabItem>
<controls:TabItem Header="Second" Style="{StaticResource TabItemStyle}">
<controls:TreeView>
<controls:TreeViewItem Header="Parent 1" />
<controls:TreeViewItem Header="Parent 2">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
</controls:TreeViewItem>
</controls:TreeViewItem>
<controls:TreeViewItem Header="Parent 3">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
<controls:TreeViewItem Header="Grandchild 2" />
</controls:TreeViewItem>
</controls:TreeViewItem>
<controls:TreeViewItem Header="Parent 4">
<controls:TreeViewItem Header="Child 1">
<controls:TreeViewItem Header="Grandchild 1" />
<controls:TreeViewItem Header="Grandchild 2" />
<controls:TreeViewItem Header="Grandchild 3" />
<controls:TreeViewItem Header="Grandchild 4" />
<controls:TreeViewItem Header="Grandchild 5" />
<controls:TreeViewItem Header="Grandchild 6" />
<controls:TreeViewItem Header="Grandchild 7" />
<controls:TreeViewItem Header="Grandchild 8" />
</controls:TreeViewItem>
</controls:TreeViewItem>
</controls:TreeView>
</controls:TabItem>
</controls:TabControl>
Now you can Change from Top/Bottom/Right/Left and the text will go vertical on Right/Left. I left top and bottom alone in this example but this should give you plenty of ideas on how to control these tabs.
I don't use VB or WinForms, so the following won't be in code and includes a couple of guesses. It's also hard to know what's different from what you want from your description without a screenshot. Am I right in thinking you just want your tab's caption text rotated 180 degrees the other way, ie the "top" of the text against the left side of the tab or the right side of the tab, whichever one it isn't now?
In the branch If tc.Alignment = TabAlignment.Right Then ... your text is being rotated by the RotateAt call:
m.RotateAt(270, New PointF(.X, .Y))
and you'll want to change 270 to 90 to have the text rotated in the other direction.
(Are you familiar with setting up transformation matrices like this? The same principles apply in OpenGL or DirectX programming. If not, comment and I'll explain / link.)
If you just do that then chances are the text will not be visible, because it will be rotated around to off the bitmap you're drawing on. You will need to translate it so that the beginning of the text is in the right corner. This is where the guesswork I mentioned above comes in: I'm not familiar with the coordinate system of the graphics framework you're using, so I don't know which direction(s) to translate. I'm sorry I can't give you working code, but I just don't have Visual Studio and a .Net Winforms control to experiment with :) I can see you're already doing something along these lines here:
m.Translate(0, .Height - tc.TabPages(0).Top)
My guess is you'd need to change this either so the X coordinate (0) is .Width or .Width - [text height, calculate this], and you may need to also account for the text width in the Y coordinate. (Text "height" and "width" are as though the text is being drawn horizontally / normally.) I'm pretty certain .Net's drawing framework probably includes Graphics TextHeight(...) and TextWidth(...) methods and if it doesn't by those names I'm sure they're easy to find :) TextRect() perhaps?
(If I was sitting at your PC and trying to figure this out by pure guesswork I'd write this code so it rotated the text in the very middle of a large bitmap, modify it so it's in the top left of the bitmap in the right spot inside a rectangle the size of a tab, and then move the code to the tab drawing method. Saves all the trouble of having a tiny little tab and running it and going "Where's my text?" when it's invisible because it's being drawn at the wrong coordinates.)
I'm having a slight problem with reskinning a ProgressBar in WPF. Specifically, no matter what I do, it seems to clip the inner indicator at about 99%. I've tried all sorts of things, from clipping to OpacityMask, but I can't seem to stop the top from cutting off. Any ideas what's going on here?
Code:
<Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Value" Value="100" />
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
<Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid>
<Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
<Border x:Name="Indicator_Gloss" CornerRadius="10" >
<Border.Background>
<LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
<GradientStop Color="#75000000" Offset="0"/>
<GradientStop Color="#7EFFFFFF" Offset="0.5"/>
<GradientStop Color="#75000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try setting inner most Grid's Margin="0,4" and set "PART_Indicator" Margin="0,0,0,-4". Or just use the code below:
<Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Value" Value="100" />
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
<Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="0,0,0,-4">
<Grid Margin="0,4">
<Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
<Border x:Name="Indicator_Gloss" CornerRadius="10" >
<Border.Background>
<LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
<GradientStop Color="#75000000" Offset="0"/>
<GradientStop Color="#7EFFFFFF" Offset="0.5"/>
<GradientStop Color="#75000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have an Expander placed on a window with a blue background and I would like to make the button for the expander another color than the default (blue, which it is receiving from the window). When I modify the background property of the expander it changes the entire expander, header and all to the new color. However, I would like only the button itself to change. Could anyone point me to the right property that I am looking for?
Thank you
You not only have to retemplate the Expander ... you need to retemplate the ToggleButton within the Expander's template ... so that you can template bind the Background brush set on the Expander all the way down through the Expander's visuals and into the ToggleButton's visuals (using two TemplateBindings).
One thing that is helpful (at least for me) when you are learning how to modify the visuals of the WPF controls is to use the SimpleStyles as these are much easier to copy and modify ... than the full fledged, normal styles & templates.
To do this, open up Blend and go into the Asset Library (the bottom most tool) ... if you click on that you will see two sets of controls: System Controls and Simple Styles. Grab one of the controls (whichever one you want) from the Simple Styles and plunk it down on the design surface. Then, you can right click on it, Edit Control Parts (Template), and Edit a Copy. This will create a copy of the Simple Styles style and template ... which you can then (more easily) modify to your hearts content.
(I should note at this point that I would then modify that xaml (generated by Blend) in both Visual Studio and Blend ... flipping back and forth as necessary ... and taking advantage of the strengths of each: Blend for its WYSIWYG design surface ... and Visual Studio for its code editing and IntelliSense support.)
I have drafted up some quick xaml that does what you are asking and will include it below. You should be able to drop this xaml in Kaxaml or another loose xaml editor.
Hope this helps.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640"
Height="480"
>
<Page.Resources>
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EEE" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</LinearGradientBrush>
<ControlTemplate x:Key="newToggleButtonControlTemplate" TargetType="{x:Type ToggleButton}">
<Grid Background="{TemplateBinding Background}">
<Rectangle
x:Name="Rectangle"
Margin="0,0,0,0"
Fill="Transparent"
Stroke="{DynamicResource NormalBorderBrush}"
/>
<Path
x:Name="Up_Arrow"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource GlyphBrush}"
Data="M 0 0 L 4 4 L 8 0 Z"
/>
<Path
x:Name="Down_Arrow"
Visibility="Collapsed"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{DynamicResource GlyphBrush}"
Data="M 0 4 L 4 0 L 8 4 Z"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="Down_Arrow"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Up_Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="newExpanderStyle" TargetType="{x:Type Expander}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" x:Name="ContentRow"/>
</Grid.RowDefinitions>
<Border
x:Name="Border"
Grid.Row="0"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2,2,0,0"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ToggleButton
Template="{DynamicResource newToggleButtonControlTemplate}"
Background="{TemplateBinding Background}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
OverridesDefaultStyle="True"
/>
<ContentPresenter Grid.Column="1" Margin="4" RecognizesAccessKey="True" ContentSource="Header"/>
</Grid>
</Border>
<Border
x:Name="ExpandSite"
Grid.Row="1"
Visibility="Collapsed"
BorderThickness="1,0,1,1"
CornerRadius="0,0,2,2"
>
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Focusable="false"
/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Page.Background>
<LinearGradientBrush EndPoint="0.997,0.996" StartPoint="0.002,0.058">
<GradientStop Color="#FF63A6DE" Offset="0"/>
<GradientStop Color="#FFC2DEF5" Offset="1"/>
</LinearGradientBrush>
</Page.Background>
<Grid x:Name="LayoutRoot">
<Expander
Style="{DynamicResource newExpanderStyle}"
Header="Expander"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Background="{DynamicResource NormalBrush}"
>
<Grid>
<Button Content="Hello World"/>
</Grid>
</Expander>
</Grid>
</Page>