So i have this "window" (not a Window but Grid):
Code:
<Grid Name="gridDeleteAllWindows">
<Grid.RowDefinitions>
<RowDefinition Height="110"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="0,0,0,0">
<Label Content="Delete All Files"
FontSize="20"
HorizontalAlignment="Center"
FontWeight="Bold"
Margin="0,0,0,0"/>
<Label Content="Are you sure you want to remove"
HorizontalAlignment="Center"
Margin="0,0,0,0"/>
<Label Content="all the files ?"
HorizontalAlignment="Center"
Margin="0,0,0,0"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Border BorderThickness="0,1,0,0" BorderBrush="#55B3B3B6">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="125"/>
<ColumnDefinition Width="125"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="#55B3B3B6" BorderThickness="0,0,1,0" Grid.Column="0">
<Grid>
<Button Name="btnDeleteAllFilesYes"
Content="Yes"
FontSize="16"
Style="{StaticResource ButtonDefaultStyle}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Click="btnDeleteAllFilesYes_Click"
Margin="0,0,0,0"/>
</Grid>
</Border>
<Border BorderBrush="#55B3B3B6" BorderThickness="0,0,1,0" Grid.Column="1">
<Grid>
<Button Name="btnDeleteAllFilesNo"
Content="No"
FontSize="16"
Background="Transparent"
Style="{StaticResource ButtonDefaultStyle}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Click="btnDeleteAllFilesNo_Click"
Margin="0,0,0,0"/>
</Grid>
</Border>
</Grid>
</Border>
</Grid>
</Grid>
Style:
<Style x:Key="ButtonDefaultStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource MetroFlatButton}" >
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Background" Value="#FF103766"/>
<Setter Property="Foreground" Value="Gainsboro"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="#FF6899D3"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border TextBlock.Foreground="{TemplateBinding Foreground}"
x:Name="Border"
CornerRadius="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}"
BorderThickness="1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
<VisualTransition GeneratedDuration="0" To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And i want just to add another color into my Button while MouseEnter so i add this Trigger:
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
Result:
And as you can see that my rounded corner is now missing so i just need your help to fix it.
Related
I am trying to add a button for each item in a ListBox.
It is like this:
Style template before adding a button:
<Style TargetType="ListBox" x:Key="ListBoxStyle">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ItemsPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
</Style>
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
<Setter Property="Canvas.Left" Value="{Binding Rectangle.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Rectangle.Y}"/>
<Setter Property="Width" Value="{Binding Rectangle.Width}"/>
<Setter Property="Height" Value="{Binding Rectangle.Height}"/>
<Setter Property="BorderBrush" Value="{Binding Hexadecimal}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Content" Value=""/>
</Style>
This is how I use the style:
<ListBox
ItemsSource="{Binding LabelShapes}"
Width="{Binding ActualWidth, ElementName=Img}"
Height="{Binding ActualHeight, ElementName=Img}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
SelectionMode="Extended"
Style="{StaticResource ListBoxStyle}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"/>
Add a button by using canvas:
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Canvas>
<Border
Canvas.Left="{Binding Rectangle.Left}"
Canvas.Top="{Binding Rectangle.Top}"
Width="{Binding Rectangle.Width}"
Height="{Binding Rectangle.Height}"
BorderBrush="{Binding Hexadecimal}"
BorderThickness="2"/>
<Grid Height="20" Canvas.Left="{Binding Rectangle.Left}" Canvas.Top="{Binding Rectangle.Bottom}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="2" Width="50" Height="30" />
</Grid>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My question is that when I add a button by using canvas, the ListBoxItem can not be selected. What is the right way to style ListBoxItem and to make the ListBoxItem can be selected? Any help will be greatly appreciated.
UPDATE
I add some visual states:
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle">
<Setter Property="Canvas.Left" Value="{Binding Rectangle.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Rectangle.Y}"/>
<Setter Property="IsSelected" Value="{Binding IsSelected}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="MyBorder"
Width="{Binding Rectangle.Width}"
Height="{Binding Rectangle.Height}"
BorderBrush="{Binding Hexadecimal}"
BorderThickness="2">
<Border.Background>
<SolidColorBrush Color="Transparent" />
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height="20" Canvas.Left="{Binding Rectangle.Left}" Canvas.Top="{Binding Rectangle.Bottom}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Width="50" Height="30" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The items can now be selected, but I can't figure out how to put a button at the bottom of the border?
I found a simple way to get what I need. Replace the ControlTemplate of the ListBoxItem by the following, and use ControlTemplate.Triggers Property to handle the style of selected item.
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle
x:Name="ShapeBorder"
HorizontalAlignment="Left"
Width="{Binding Rectangle.Width}"
Height="{Binding Rectangle.Height}"
Stroke="{Binding Hexadecimal}"
StrokeThickness="1"/>
<Grid Height="20" Margin="0 0 0 -20" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="2" Width="50" Height="20" />
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ShapeBorder" Property="StrokeThickness" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I'm trying to create a template for my progressebar with round corners but I have trouble implementing the right side of my progressbar.
Here is my template :
<ProgressBar Name="blabla" Value="80" Maximum="100" Margin="95,282,113,0">
<ProgressBar.Style>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Height="10" MinWidth="50" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate" />
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="00:00:00"
Storyboard.TargetName="PART_Indicator"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="00:00:00">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush>Transparent</SolidColorBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="PART_Track" CornerRadius="4" BorderThickness="1"
BorderBrush="{DynamicResource CouleurForegroundProgressBar}">
</Border>
<Border CornerRadius="4,0,0,4" BorderThickness="1" x:Name="PART_Indicator"
HorizontalAlignment="Left" Background="{DynamicResource CouleurForegroundProgressBar}"
BorderBrush="{DynamicResource CouleurForegroundProgressBar}"
Margin="0,0,0,0">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource CouleurForegroundProgressBar}" />
</Style>
</ProgressBar.Style>
</ProgressBar>
And it looks like I wanted :
But When the value reaches 100% the progression bar inside (PART_Indicator) is still straight and hide my right radius :
How can I avoid that ?
Set CornerRadius="4" on your Part_Indicator also
<Border
CornerRadius="4"
BorderThickness="1"
x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="Red"
BorderBrush="Red"
Margin="0,0,0,0">
OR I will use the Triggers like below:
<Border BorderThickness="1"
x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="Red"
BorderBrush="Red"
Margin="0,0,0,0">
<Border.Style>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="4,0,0,4"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ProgressBar}}}" Value="100">
<Setter Property="CornerRadius" Value="4"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
Adding to Nitin's Answer, you'll have to change the names of the Border elements from "PART_Track" and "PART_Indicator" to "ProgressBarTrack" and "ProgressBarIndicator" respectively. If you don't, the bound value might go out of bounds if its width is bigger than the element.
O.S. : Microsoft Windows 8.1
Developing Application: Microsoft Visual Studio 2013 (WPF App development)
I have moved from Windows 7 to Windows 8.1 and now my old apps which i had developed in VS2012 have a weird manner. because my language is right-to-left, i use RightToLeft for FlowDirection. it was working fine as all text was showing on the left side of CheckBox but now the tick sign of CheckBox is mirrored like this:
the tick sign is not correct even in a right-to-left language. is this because O.S. or the VS2013 and how can i fix it? do i need to create a template? thanks.
I had the same problem, and this is the best solution i found. The path is what draws the tick, so just changing its flow direction back to LeftToRight makes it draw as you would expect.
<CheckBox Content="My Checkbox" FlowDirection="RightToLeft">
<CheckBox.Resources>
<Style TargetType="{x:Type Path}">
<Setter Property="FlowDirection" Value="LeftToRight"/>
</Style>
</CheckBox.Resources>
</CheckBox>
<Grid>
<Grid.Resources>
<Style x:Key="ArabicStyle" TargetType="{x:Type CheckBox}">
<Style.Resources>
<Style TargetType="{x:Type Path}">
<Setter Property="FlowDirection" Value="LeftToRight"/>
</Style>
</Style.Resources>
</Style>
</Grid.Resources>
<CheckBox Content="My Checkbox:" Style="{StaticResource ArabicStyle}"/>
</Grid>
When you want to use standard Checkbox Control, set FlowDirection of path to LeftToRight will work but if you create a custom template it doesn't work so Make a custom Style template for CheckBox like this and set FlowDirection of main Grid to LeftToRight" :
<Style TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Height" Value="30" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator>
<BulletDecorator.Bullet>
<!-- ****************** here set FlowDirection to LeftToRight *********************************** -->
<Grid FlowDirection="LeftToRight" Height="{TemplateBinding Height}" Width="{Binding RelativeSource={RelativeSource Self}, Path=Height, UpdateSourceTrigger=PropertyChanged}"
MinHeight="30" MinWidth="30" ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="4*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="4*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Border Name="MainBorder"
Grid.ColumnSpan="9" Grid.RowSpan="9"
CornerRadius="4"
BorderThickness="1"
Background="Transparent" />
<Border Name="InnerBorder"
Grid.Column="1" Grid.ColumnSpan="5"
Grid.Row="2" Grid.RowSpan="5"
BorderThickness="1"
BorderBrush="#808080" />
<Path Name="InnerPath"
Grid.Column="1" Grid.ColumnSpan="5"
Grid.Row="2" Grid.RowSpan="5"
Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75"
Stretch="Fill" Stroke="Red"/>
<Path Name="CheckMark"
Grid.Column="2" Grid.ColumnSpan="5"
Grid.Row="1" Grid.RowSpan="5"
Opacity="0"
Data="M9.07743946676476E-09,4.31805768640244L4.68740335877841,8.86361158398516C4.68740335877841,8.86361158398516,16.3281249985376,-2.42451336648723,16.3281249985376,-2.42451336648723L14.0622100581796,-4.77304938341948 4.68740335877846,4.31805791992662 2.22656251699567,1.93164208562579z"
Fill="#3babe3"
Stretch="Fill"
Stroke="#3babe3" />
<Path Name="InderminateMark"
Grid.Column="3"
Grid.Row="4"
Data="M0,4 L1,5 5,1 4,0"
Opacity="0"
Stretch="Fill"
StrokeThickness="0"
Fill="#808080" />
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" >
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="InderminateMark" Duration="0:0:0.2" To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="4,0,4,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="InnerBorder" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MainBorder" Property="Background" Value="#81d2eb" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="CheckMark" Property="Fill" Value="#cccccc" />
<Setter TargetName="CheckMark" Property="Stroke" Value="#cccccc" />
<Setter TargetName="InnerPath" Property="Stroke" Value="#cccccc" />
<Setter TargetName="InderminateMark" Property="Fill" Value="#cccccc" />
<Setter TargetName="InnerBorder" Property="BorderBrush" Value="#cccccc" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyFocusVisualStyte" >
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle x:Name="FocusStyle" StrokeDashArray="4 4" RadiusX="5" RadiusY="5" Fill="Transparent"
Stroke="#81d2eb" StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm using AvalonDock to develop a tool for internal use by our developers and QA. I am working on a custom version of the VS2010 style that is provided in the Themes. The style just didn't function enough like VS2010 for me to be happy with it. I've made almost all the color and image changes and I just noticed that the tabs in the DocumentPane do not scroll like VS2010 when there are more tabs than can fit in the header area.
Since I have the complete style in my project I found the area where the styles are applied. I placed a ScrollViewer around the ad:DocumentTabPanel thinking I could somehow restyle the horizontal scrollbar so that there would be an arrow on the left and on the right of the tabs.
Is this possible?
Here is the style after my base modifications but without any modification to the scrollviewer:
<Style x:Key="{x:Type ad:DocumentPane}" TargetType="{x:Type ad:DocumentPane}">
<Setter Property="Background" Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DefaultBackgroundBrush}}}"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ad:DocumentPane}" >
<ControlTemplate.Resources>
<ContextMenu x:Key="DocumentsListMenu" StaysOpen="True" />
</ControlTemplate.Resources>
<Border
Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="PART_Header"
Grid.Row="0"
Focusable="False"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="18"/>
</Grid.ColumnDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" CanContentScroll="True">
<ad:DocumentTabPanel
x:Name="paneTabsPanel"
Panel.ZIndex ="1"
IsItemsHost="True"
TabItemStyle="{StaticResource CustomDocumentTabItemStyle}"/>
</ScrollViewer>
<Button x:Name="PART_ShowContextMenuButton"
Grid.Column="2"
Width="15" Height="15"
Style="{StaticResource PaneHeaderCommandStyle}">
<Image x:Name="ShowContextMenuIcon" Source="pack://application:,,,/Images/Dev2010/PinMenu.png" Width="13" Height="13" Stretch="None"/>
</Button>
</Grid>
</Border>
<Grid Grid.Row="1">
<Border
x:Name="topBorder"
Height="4"
Background="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorder}}}"
CornerRadius="2,2,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
>
</Border>
<Border
x:Name="bottomBorder"
Height="4"
Background="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorder}}}"
CornerRadius="0,0,2,2"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
>
</Border>
<ContentPresenter
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedItem.Content}"
Margin="0,4,0,4"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="1"
/>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="ShowHeader" Value="False">
<Setter Property="Visibility" Value="Collapsed" TargetName="PART_Header" />
</Trigger>
<!--<DataTrigger Binding="{Binding Path=IsMainDocumentPane, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Source" Value="pack://application:,,,/Images/Dev2010/PinDockMenu.png" TargetName="ShowContextMenuIcon"/>
</DataTrigger>-->
<Trigger Property="ContainsActiveDocument" Value="True">
<Setter Property="Background"
Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelected}}}"
TargetName="topBorder"/>
<Setter Property="Background"
Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelected}}}"
TargetName="bottomBorder"/>
</Trigger>
<Trigger Property="ContainsActiveContent" Value="True">
<Setter Property="Background"
Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelectedActivated}}}"
TargetName="topBorder"/>
<Setter Property="Background"
Value="{DynamicResource {ComponentResourceKey {x:Type ad:DockingManager}, {x:Static ad:AvalonDockBrushes.DocumentHeaderBorderSelectedActivated}}}"
TargetName="bottomBorder"/>
</Trigger>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:0.200" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I did something like this in the past, and found it easiest to hide the ScrollViewer's ScrollBar, and manually scroll the content when two RepeatButtons are pressed.
The code I originally started with can be found here, but the basic idea is to overwrite the ScrollViewer's template to look something like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<RepeatButton Grid.Column="0" Command="ScrollBar.PageLeftCommand" Content="<" />
<RepeatButton Grid.Column="2" Command="ScrollBar.PageRightCommand" Content=">" />
<ScrollContentPresenter Grid.Column="1" Content="{TemplateBinding ScrollViewer.Content}"/>
</Grid>
How do I make the selected item of a ComboBox show up in the ComboBox textfield AND use Borders in the ComboBox ControlTemplate? With the following code the items popup fine but never show up in the ComboBox textfield after selecting; but removing the 2 Borders from the ComboBox template fixes this. Why?? How?? And more importantly: how do I use this template with Borders AND have the SelectedItem show up properly in the ComboBox textfield after selecting?
<Window.Resources>
<Style x:Key="ComboboxDropdownButton" TargetType="{x:Type ToggleButton}">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Width" Value="NaN"/>
<Setter Property="Height" Value="NaN"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<DockPanel SnapsToDevicePixels="True"
Background="{TemplateBinding Background}"
LastChildFill="False">
<Border x:Name="Border"
Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
DockPanel.Dock="Right"
Background="WhiteSmoke"
CornerRadius="0,3,3,0"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
>
<Path Fill="{TemplateBinding Foreground}"
HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L4.5,4 9,0z"/>
</Border>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}"
TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Border SnapsToDevicePixels="True"
x:Name="OuterBorder"
Background="Transparent"
BorderBrush="Red"
BorderThickness="1"
CornerRadius="4"
Margin="-1">
<Border x:Name="InnerBorder"
Background="WhiteSmoke"
BorderThickness="1"
CornerRadius="3"
BorderBrush="Black">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="ContentSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton"
Margin="-1"
Grid.Column="2"
Focusable="False"
ClickMode="Press"
Style="{StaticResource ComboboxDropdownButton}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
</ToggleButton>
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="PART_Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid x:Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
>
<Border x:Name="DropDownBorder"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{Binding ActualWidth, ElementName=Border}"
Background="WhiteSmoke"
BorderBrush="Black"
BorderThickness="1" CornerRadius="0,0,3,3">
</Border>
<ScrollViewer Padding="1" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ComboBox Width="120" Height="20" Name="comboBox1" SnapsToDevicePixels="True"
HorizontalAlignment="Center" VerticalAlignment="Center"
Text="ComboBox" SelectedIndex="0" IsEditable="True" IsReadOnly="True">
<ComboBoxItem>item 1</ComboBoxItem>
<ComboBoxItem>item 2</ComboBoxItem>
<ComboBoxItem>item 3</ComboBoxItem>
</ComboBox>
</Grid>
I finally solved this.. by removing the borders from the template. I replaced the borders with rectangles in the grid of the template. Worked like a charm. The result can be found in the next question here.