I have RadComboBox. Like as :
<telerik:RadComboBox Grid.Row="4" Grid.Column="1" Name="truckComboBox" Width="280" Height="30" Margin="5,35,5,5" StaysOpenOnEdit="True"
IsSynchronizedWithCurrentItem="True" Template="{StaticResource RadComboBoxControlTemplate1}"
DisplayMemberPath="Description" EmptyText="Select" OpenDropDownOnFocus="True" HorizontalAlignment="Left"
ItemsSource="{Binding TrucksCV, UpdateSourceTrigger=PropertyChanged}" TextSearchMode="Contains" IsFilteringEnabled="True" IsEditable="True" SelectedValue="{Binding TechUserModel.TruckID, Mode=TwoWay}">
<telerik:RadComboBox.ItemContainerStyle>
<Style TargetType="{x:Type telerik:RadComboBoxItem}">
<Setter Property="FontSize" Value="18"></Setter>
<Setter Property="FontWeight" Value="SemiBold"></Setter>
</Style>
</telerik:RadComboBox.ItemContainerStyle>
</telerik:RadComboBox>
I want to increase height of arrow button and we are customize the template like as:
<ControlTemplate x:Key="RadComboBoxControlTemplate1" TargetType="{x:Type telerik:RadComboBox}">
<Grid x:Name="VisualRoot">
<Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
<telerik:RadToggleButton x:Name="PART_DropDownButton" ClickMode="Press" IsTabStop="False" Margin="0" Padding="0" Width="100">
<telerik:RadToggleButton.Template>
<ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Width="100"/>
</ControlTemplate>
</telerik:RadToggleButton.Template>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonChrome" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}" Width="100">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</Telerik_Windows_Controls_Chromes:ButtonChrome>
<ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
<ContentControl.Template>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid Margin="5,0">
<Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
<Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</telerik:RadToggleButton>
</Grid>
</ControlTemplate>
But when we run application then RadComboBox does not showing any change why? Please provide need full solution of my question. thanks in advance.
Related
I have the code for the TabControl below. I want to achieve tab style similar to google chrome browser.
I want to make the bottom corners slightly rounder towards the pinkish background and not inwards.
How to set the rounded corners of TabItem to achieve the same effect as Google?
The resulting graph I have now：
Xmal:
<Window.Resources>
<SolidColorBrush x:Key="PrimaryBG" Color="#ad00ad"/>
<SolidColorBrush x:Key="Blueish" Color="#5252ff"/>
<SolidColorBrush x:Key="Greenish" Color="#005757"/>
<SolidColorBrush x:Key="Blackish" Color="#2e2e00"/>
<Style x:Key="{x:Type TabControl}" TargetType="{x:Type TabControl}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="0,0,1,1" BorderBrush="#D0CEBF" Grid.Row="1">
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter ContentSource="SelectedContent"/>
</Border>
</Border>
</Border>
<TabPanel Grid.Row="0" IsItemsHost="true" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TabItem">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<!--In order to click on the blank part of the TabItem can be successfully selected-->
<Border Background="Transparent" >
<Grid>
<Grid x:Name="g">
<Border CornerRadius="5,5,7,7" Background="{TemplateBinding Background}" Margin="0,0,0,-1"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
</Grid>
<Border BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</Border>
<!--Add ControlTemplate.Triggers to change the background color of the selected TabItem.-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="{DynamicResource PrimaryBG}" Name="grid" >
<TabControl HorizontalAlignment="Center" HorizontalContentAlignment="Stretch" Margin="0,0,0,0"
Name="tabControl1" VerticalAlignment="Top" >
<TabItem Header="Dashboard" Name="tabItem1" Background="{DynamicResource Blueish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">
<Border Background="#5252ff" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}">
<StackPanel>
<TextBox Width="200" Height="25"/>
<TextBox Width="200" Height="25"/>
</StackPanel>
</Border>
</TabItem>
<TabItem Header="Invoicing" Name="tabItem2" Background="{DynamicResource Greenish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0">
<Border Background="#005757" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}" >
<Button Width="80" Height="25"/>
</Border>
</TabItem>
<TabItem Header="Transactions" Name="tabItem3" Background="{DynamicResource Blackish}" Foreground="White"
HorizontalContentAlignment="Center" VerticalAlignment="Stretch" Width="180" HorizontalAlignment="Center"
FontFamily="Leelawadee UI" FontSize="20" Margin="0,0,0,0" Padding="0,0,0,0" >
<Border Background="#2e2e00" Margin="0,0,0,0" Padding="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Width="{Binding ElementName=grid,Path=ActualWidth}" Height="{Binding ElementName=grid, Path=ActualHeight}" >
<ComboBox Width="300" Height="25"/>
</Border>
</TabItem>
</TabControl>
</Grid>
Edit:
Is it possible to give a path of the red line in the figure?
You can create any shape by Path and place it both sides of tab. For example, such Path would be as follows.
<Path Width="20" Height="40" Stretch="Uniform" Fill="Blue"
StrokeThickness="2" Stroke="Red"
Data="M 20,40 L 0,40 0,40 C 4,40 10,36 10,30 L 10,10 C 10,0 16,0 20,0"/>
You can flip it by <ScaleTransform ScaleX="-1"/>.
Edit:
Edited Path. You can draw outline by Stroke and leave a segment open by removing Z.
Here is a question that I already has an answer. I want to mark here to help others. I have a self-defined tabcontrol. When I do the automation, the control tree of tabitem doesn't populated in inspect.
Here is the code:
<Window.Resources>
<Style x:Key="TabControlStyle1" TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<TabPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" 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="Local">
<ContentPresenter ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Margin="5" Style="{DynamicResource TabControlStyle1}">
<TabItem Header="tab 1">
<Button Width="90" Height="90" Content="btn1"/>
</TabItem>
<TabItem Header="tab 2">
<Button Width="90" Height="90" Content="btn2"/>
</TabItem>
</TabControl>
</Grid>
Why the Tabitem is unseen in inspect?
I has to add the x:Name to ContentPresenter. And x:Name must be PART_SelectedContentHost
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
I want to create a progressbar that looks like a cylinder in wpf, just like the following image (here it's made in winform) :
Can anyone show me how to do it, or maybe give me a trick? Thank you
You have to edit Template of progressbar for this.See Template of Progressbar
Edited Template/Style
<Window.Resources>
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot">
<Border Margin="5,0,5,0" BorderThickness="0,1.2,0,1.2" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True" Background="{TemplateBinding Background}"/>
<Rectangle x:Name="PART_Track"/>
<Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left">
<Grid x:Name="Indicator">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Margin="0,0,-3,0" Grid.Column="1" Fill="{TemplateBinding Foreground}" />
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="8" Fill="{TemplateBinding Foreground}"/>
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="10" Fill="{TemplateBinding Foreground}"/>
<Rectangle Margin="5,0,0,0" Fill="{TemplateBinding Foreground}"></Rectangle>
<Border Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" Margin="-5,0,-2,0" BorderThickness="0,1,0,1"/>
</Grid>
<Grid x:Name="Animation">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" Grid.Column="2" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="8" Fill="{TemplateBinding Foreground}"/>
<Rectangle Grid.Column="1" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<ScaleTransform/>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Grid Background="{TemplateBinding Foreground}">
<TextBlock Grid.ColumnSpan="2" Text="{Binding Path=Value,RelativeSource={RelativeSource TemplatedParent}}" RenderTransformOrigin=".5,.5" Foreground="Black">
<TextBlock.RenderTransform>
<RotateTransform Angle="90"></RotateTransform>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="10" Fill="{TemplateBinding Foreground}"/>
<Rectangle Margin="5,0,0,0" Fill="{TemplateBinding Foreground}"></Rectangle>
<Border Grid.Column="1" BorderBrush="{TemplateBinding BorderBrush}" Margin="-5,0,-2,0" BorderThickness="0,1,0,1"/>
</Grid>
</Grid>
<Ellipse HorizontalAlignment="Right" Height="{Binding Path=Width,RelativeSource={RelativeSource TemplatedParent}}" StrokeThickness="{TemplateBinding BorderThickness}" Stroke="{TemplateBinding BorderBrush}" Width="8" Fill="{TemplateBinding Background}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate" Value="True">
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="30" Height="150" />
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="47.5" Height="150" />
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="75" Height="150" />
<ProgressBar BorderThickness="1" BorderBrush="#95928A" SnapsToDevicePixels="True" Background="#E2E2E2" Foreground="#D4BC39" Margin="30" Width="30" IsIndeterminate="False" Orientation="Vertical" Minimum="0" Maximum="100" Value="100" Height="150" />
</StackPanel>
Result
Visit this webpage.They do using windows form but the logic can be applied in wpf.
http://www.c-sharpcorner.com/UploadFile/johndouglas/ProgressarBarWithCylinderEffect11152005234729PM/ProgressarBarWithCylinderEffect.aspx
Hi i have this groupbox template.
<Style x:Key="bordesTransparentes" TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<!--<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="4" Grid.Column="0" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3"/>-->
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Grid.ColumnSpan="4" Grid.Row="1" Grid.Column="0" Grid.RowSpan="3">
<Border.OpacityMask>
<MultiBinding ConverterParameter="7" UpdateSourceTrigger="Default">
<MultiBinding.Converter>
<BorderGapMaskConverter/>
</MultiBinding.Converter>
<Binding Path="ActualWidth" ElementName="Header"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
</Border>
</Border>
<Border x:Name="Header" Grid.Column="1" Padding="2,0,2,0" Grid.Row="0" Grid.RowSpan="2">
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentSource="Header"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ContentPresenter Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="1"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Margin="{TemplateBinding Padding}"
Grid.Row="2"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I need to move the head to the right. Try to do this by changing the width (6 to 20) of the first column and ConverterParameter (7 to 21), but the controls contained
inside, also move to the right. some solution
I need something like this, BUT, without the lines that are behind the text.
https://social.msdn.microsoft.com/Forums/getfile/564693
Style according to image you have provided.
<Window.Resources>
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Grid Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" Background="White">
<ContentPresenter TextElement.FontSize="22" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<Border Margin="0,15,0,0" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Grid.ColumnSpan="4" Grid.Column="0" Grid.RowSpan="3">
<Border.OpacityMask>
<MultiBinding ConverterParameter="7" UpdateSourceTrigger="Default">
<MultiBinding.Converter>
<BorderGapMaskConverter/>
</MultiBinding.Converter>
<Binding Path="ActualWidth" ElementName="Header"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
</Border>
</Border>
<ContentPresenter Grid.ColumnSpan="2"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Grid.Column="1"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Margin="{TemplateBinding Padding}"
Grid.Row="2"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<GroupBox Height="300" Width="600" Header="Datos a completor por el empleado" Margin="50">
<StackPanel Margin="0,20,0,0" Height="30" VerticalAlignment="Top" Orientation="Horizontal">
<TextBlock Text="Nombre de useario" FontSize="20"></TextBlock>
<TextBox Height="30" Width="350" Margin="30,0,0,0"></TextBox>
</StackPanel>
</GroupBox>
Result 1
<Window.Resources>
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Border Margin="0,15,0,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" Grid.Column="0" Grid.RowSpan="3">
<Border.OpacityMask>
<MultiBinding ConverterParameter="7" UpdateSourceTrigger="Default">
<MultiBinding.Converter>
<BorderGapMaskConverter/>
</MultiBinding.Converter>
<Binding Path="ActualWidth" ElementName="Header"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
</Border>
</Border>
<Grid HorizontalAlignment="Right" Margin="0,0,20,0" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" Background="White">
<ContentPresenter TextElement.FontSize="22" Grid.ColumnSpan="4" Grid.Row="0" Grid.RowSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<ContentPresenter Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<GroupBox Height="300" Width="600" Header="Datos a completor por el empleado" Margin="50">
<StackPanel Margin="0,20,0,0" Height="30" VerticalAlignment="Top" Orientation="Horizontal">
<TextBlock Text="Nombre de useario" FontSize="20"></TextBlock>
<TextBox Height="30" Width="350" Margin="30,0,0,0"></TextBox>
</StackPanel>
</GroupBox>
Result2
So after few days learning WPF im trying to make custom style for my ComboBox. I want to set border with content width to fill all unused space between border and drop down button. After I fix this I will start with drop down list with items.
Result:
Code:
<Style TargetType="ComboBox">
<Setter Property="Foreground" Value="Yellow"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<DockPanel>
<Border x:Name="bg" BorderBrush="Yellow" Background="HotPink" BorderThickness="1" CornerRadius="0" DockPanel.Dock="Left">
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
</Border>
<Button x:Name="dropBtn" Width="20" DockPanel.Dock="Right" HorizontalAlignment="Right">
<Path VerticalAlignment="Center"
Width="10"
Height="8"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
Stretch="Fill"
Fill="HotPink"/>
</Button>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Move button before border in your DockPanel so that it becomes last child of your panel.
Then set LastChildFill to True on DockPanel.
<DockPanel LastChildFill="True">
<Button x:Name="dropBtn" Width="20" DockPanel.Dock="Right"
HorizontalAlignment="Right">
<Path VerticalAlignment="Center"
Width="10"
Height="8"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
Stretch="Fill"
Fill="HotPink"/>
</Button>
<Border x:Name="bg" BorderBrush="Yellow" Background="HotPink"
BorderThickness="1" CornerRadius="0" DockPanel.Dock="Left">
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
</Border>
</DockPanel>
As per documentation of LastChildFill:
Gets or sets a value that indicates whether the last child element
within a DockPanel stretches to fill the remaining available space.