I'm trying to make a custom window style. The goal is to create a template that migth be used by every window in my application. Template contains the toolbar, title and "the area which will be used by window". The problem is: When I use my style I can no longer add grid and conrols.
App.xaml
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="Background" Value="MintCream"/>
<Setter Property="BorderBrush" Value="#0046E7"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.ColumnSpan="2">
<TextBlock TextAlignment="Center"
Margin="0 10 0 0"
FontSize="22"
FontWeight="DemiBold"
Foreground="RoyalBlue"
Text="{TemplateBinding Title}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1"
Orientation="Horizontal"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="0 10 15 0">
<Button Style="{StaticResource MinimizeButtonStyle}"
Width="25"
Height="22"
Margin="0 0 10 0"/>
<Button Style="{StaticResource CloseButtonStyle}"
Width="25"
Height="22"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow.xaml
<Window x:Class="WindowForHW2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WindowForHW2"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
Style="{StaticResource CustomWindowStyle}">
<Grid>
<Button Width="100" Height="40" Content="Hello"/>
</Grid>
Template Works, but I cannot add smth anymore:
You need to add a ContentPresenter where the Content of your Window goes. Try this.
<Style x:Key="CustomWindowStyle" TargetType="{x:Type Window}">
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="ResizeMode" Value="NoResize"/>
<Setter Property="Background" Value="MintCream"/>
<Setter Property="BorderBrush" Value="#0046E7"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.ColumnSpan="2">
<TextBlock TextAlignment="Center"
Margin="0 10 0 0"
FontSize="22"
FontWeight="DemiBold"
Foreground="RoyalBlue"
Text="{TemplateBinding Title}"/>
</StackPanel>
<StackPanel Grid.Row="0" Grid.Column="1"
Orientation="Horizontal"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="0 10 15 0">
<Button Content="+"
Width="25"
Height="22"
Margin="0 0 10 0"/>
<Button Content="X"
Width="25"
Height="22" />
</StackPanel>
<!-- here goes the content -->
<ContentPresenter Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
Application with an Dashboard.
The Dashboard uses Cards in the form of User Controls. These Controls weren't responsive so I put them into Viewboxes. Some Cards are working but some don't. Especially the Cards with DataGrids in them don't work for me. Maybe you can help me out.
DashboardView
Here is the DashboardPage:
<Page x:Class="Keppler.MES.Common.Pages.Dashboard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:sysglb="clr-namespace:System.Globalization;assembly=mscorlib"
xmlns:local="clr-namespace:Keppler.MES.Common.Pages"
xmlns:pageviewmodels="clr-namespace:Keppler.ViewModels.PageViewModels;assembly=Keppler.ViewModels" xmlns:controls="clr-namespace:Keppler.MES.Common.Pages.Controls"
mc:Ignorable="d"
Title="DashboardPage">
<Page.DataContext>
<pageviewmodels:VMDashboard/>
</Page.DataContext>
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\Common\ResourceDictionaries\KepplerColorsAndBrushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="7*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<controls:KepplerEffortCard PageName="Bookings" GroupedEfforts="{Binding EffortOfLastWorkDay}" EffortOfBindings="{Binding LastWorkDaysEffort}" JumpToLink="{Binding RequestPageChangeCommand}" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2"/>
<controls:KepplerEffortCard PageName="Bookings" GroupedEfforts="{Binding EffortOfLastWeek}" EffortOfBindings="{Binding LastWeeksEffort}" JumpToLink="{Binding RequestPageChangeCommand}" Grid.Column="6" Grid.Row="3" Grid.ColumnSpan="6" Grid.RowSpan="2"/>
<controls:KepplerOrdersCard PageName="Orders" Grid.ColumnSpan="12" Grid.Row="5" Grid.RowSpan="2" OrderBudgets="{Binding OrderBudgets}" JumpToLink="{Binding RequestPageChangeCommand}"/>
<controls:KepplerTurnOverCard Grid.Row="0" Grid.ColumnSpan="2" Header="{Binding TurnOverThisYear.Header}" TurnOver="{Binding TurnOverThisYear.TurnOver}" Grid.Column="0" Margin="10,0" />
<controls:KepplerTurnOverCard Grid.Row="0" Header="{Binding TurnOverLastYear.Header}" TurnOver="{Binding TurnOverLastYear.TurnOver}" Grid.Column="2" Grid.ColumnSpan="2" Margin="10,0" RenderTransformOrigin="0.5,0.5"/>
<controls:KepplerTurnOverCard Grid.Row="0" Grid.ColumnSpan="2" Header="{Binding TurnOverThisQuarter.Header}" TurnOver="{Binding TurnOverThisQuarter.TurnOver}" Grid.Column="4" Margin="10,0"/>
<controls:KepplerTurnOverCard Header="{Binding TurnOverThisMonth.Header}" TurnOver="{Binding TurnOverThisMonth.TurnOver}" Grid.ColumnSpan="2" Grid.Column="6" Grid.Row="0" Margin="10,0"/>
<Viewbox Grid.Row="1" Grid.Column="0" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding BudgetWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="2" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Invoices" WarningsInfo="{Binding InvoiceWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="4" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding ResourceWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="6" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding DeliveryWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="8" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerWarningCard PageName="Orders" WarningsInfo="{Binding WorkloadWarning}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Viewbox>
<Viewbox Grid.Row="1" Grid.Column="10" StretchDirection="Both" Stretch="Fill" Grid.ColumnSpan="2" Grid.RowSpan="2">
<controls:KepplerBankingCard BankingsInfo="{Binding BankingsInfo}"/>
</Viewbox>
<controls:KepplerCustomerCard PageName="Customers" Grid.Row="7" Grid.RowSpan="2" Customers="{Binding Customers}" Grid.ColumnSpan="12" JumpToLink="{Binding RequestPageChangeCommand}"/>
<controls:KepplerProjectsCard PageName="Projects" Grid.ColumnSpan="12" Grid.Row="9" Grid.RowSpan="2" Projects="{Binding Projects}" JumpToLink="{Binding RequestPageChangeCommand}"/>
</Grid>
Here is the Control:
<UserControl x:Class="Keppler.MES.Common.Pages.Controls.KepplerOrdersCard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Keppler.MES.Common.Pages.Controls"
mc:Ignorable="d"
Name="OrderBudgetCard"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\..\Common\ResourceDictionaries\KepplerColorsAndBrushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Border CornerRadius="5" Margin="5" BorderThickness="0">
<Border.BitmapEffect>
<DropShadowBitmapEffect/>
</Border.BitmapEffect>
<Grid>
<Border x:Name="DBRounded" CornerRadius="5" BorderThickness="1" Background="#FF888888"/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Border x:Name="Header" Grid.ColumnSpan="1" Grid.RowSpan="1" CornerRadius="5,5,0,0" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFAE00" Offset="0"/>
<GradientStop Color="#FFFFC500" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Button Background="Transparent" Command="{Binding ElementName=OrderBudgetCard, Path=JumpToLink}" CommandParameter="{Binding ElementName=OrderBudgetCard, Path=PageName}" Grid.ColumnSpan="1" Grid.RowSpan="2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"
BorderThickness="1" CornerRadius="5">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="#FFFFAE00"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
<DataGrid x:Name="dgOrderBudgets"
Background="Transparent"
ItemsSource="{Binding ElementName=OrderBudgetCard, Path=OrderBudgets}"
AutoGenerateColumns="False"
HorizontalGridLinesBrush="Transparent"
VerticalGridLinesBrush="Transparent"
BorderBrush="Transparent"
IsReadOnly="True" Grid.RowSpan="2">
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="Background" Value="Transparent"/>
</Style>
</DataGrid.RowHeaderStyle>
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="auto"/>
<Setter Property="Margin" Value="5"/>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="black"/>
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Foreground" Value="darkred"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="order number" Width="200" Binding="{Binding Order.Number}"/>
<DataGridTextColumn Header="budget [€]" Width="120" Binding="{Binding Order.Subtotal,StringFormat=C2, ConverterCulture=de-DE}"/>
<DataGridTextColumn Header="consumed [€]" Width="*" Binding="{Binding EffortInCash,StringFormat=C2, ConverterCulture=de-DE}"/>
<DataGridTextColumn Header="state" Width="*" Binding="{Binding Order.Title}"/>
</DataGrid.Columns>
</DataGrid>
<Grid.OpacityMask>
<VisualBrush Visual="{Binding ElementName=DBRounded}"/>
</Grid.OpacityMask>
</Grid>
</Grid>
</Border>
I tried putting the other Controls into Viewboxes like the Warningcards, but I didnt get anything out of it. Doesnt matter if I used fill, uniform or uniformtofill.
I have a custom button Style written in XAML. It is a button with image and text.
But the Image should be customizable. I need to change the Source property in designer.
My code:
<Window.Resources>
<ResourceDictionary>
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="img/desktop.png" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" Grid.Row="1" Background="LightGreen">
<StackPanel >
<Button Style="{StaticResource SSbutton}" Width="90" Height="30" Content="Desktop" FontSize="13"
Foreground="White"/>
</StackPanel>
</Border>
</Grid>
How can I do that?
Piggy back in to the property using an arbitrary template binding with the handy dandy Tag property;
<Style x:Key="SSbutton" TargetType="{x:Type Button}">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="Green"/>
<!-- Set a default -->
<Setter Property="Tag" Value="img/desktop.png"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Viewbox Stretch="Uniform">
<Border Background="{TemplateBinding Background}" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--I want to change this Source property-->
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Width="30" HorizontalAlignment="Left" />
<TextBlock Margin="3,0,0,0" HorizontalAlignment="Right" VerticalAlignment="Center"
Text="{TemplateBinding Content}" FontSize="{TemplateBinding FontSize}"/>
</StackPanel>
</Border>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then at the instance;
<Button Style="{StaticResource SSbutton}"
Tag="Some/Other/Image.png"
Width="90" Height="30"
Content="Desktop"
FontSize="13" Foreground="White"/>
Hope this helps, cheers.
Edit: Updated to reflect path considerations for templatebinding in wpf as per OP's comments.
I am new to the WPF technology. Currently I am willing to apply master page concept in an WPF application.
I have used ResourceDictionary for the same. I am facing an issue while doing this as per below.
I want list of link buttons to be displayed on my Master page.
As there is no direct link button control available in the WPF I have found a style script used to create a link button as per below.
<Style x:Key="Link" TargetType="Button">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline"
Text="{TemplateBinding Content}"
Background="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I have a button control used in the ResourceDictionary file and I am trying apply this style to the button control. It compiles successfully but runs with an exception message.
Below is my code of ResourceDictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MSRTC.Master">
<Style TargetType="{x:Type local:Master}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Master}">
<Grid Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="850"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="120"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="D:\Assignments\WPF\MSRTC\Developement\MSRTC\MSRTC\MSRTC\Images\Logo.png" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Image Source="D:\Assignments\WPF\MSRTC\Developement\MSRTC\MSRTC\MSRTC\Images\HeaderImage1.jpg" Grid.Column="1" Grid.Row="0" Stretch="Fill"/>
<Grid Grid.Row="1" Grid.Column="0" Background="Silver" Height="400">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Welcome" FontWeight="Bold" FontSize="15" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button Name="btnHome" Content="Home" Grid.Row="1" Style="{StaticResource Link}"></Button>
</Grid>
<StackPanel Margin="10" Grid.Column="1" Grid.Row="1">
<!--<StackPanel Margin="10" Grid.Column="0" Grid.Row="1">-->
<ContentPresenter Content="{TemplateBinding Title}"/>
<ContentPresenter Content="{TemplateBinding Abstract}"/>
<ContentControl Content="{TemplateBinding Content}"/>
</StackPanel>
</Grid>
<!--<StackPanel Margin="10">
<ContentPresenter Content="{TemplateBinding Title}"/>
<ContentPresenter Content="{TemplateBinding Abstract}"/>
<ContentControl Content="{TemplateBinding Content}"/>
</StackPanel>-->
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Can anyone tell me where I am going wrong and how to takle with this.
Also one thing to be mention, the link button style script I have written in App.xaml Application.Resource section.
Thanks in advance.
I have a customized TabControl:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TabPanel Grid.Column="0" Panel.ZIndex="1" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Column="1">
<ItemsControl.Items>
<Button Height="50">DOMINATES</Button>
</ItemsControl.Items>
</ItemsControl>
</Grid>
<ContentPresenter Grid.Row="0" ContentSource="SelectedContent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Background="LightCyan" Padding="20,0">
<TextBlock SnapsToDevicePixels="True" Text="{TemplateBinding Header}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock>1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock>2</TextBlock>
</TabItem>
</TabControl>
</Window>
Beside the TabItems other controls are placed - which are much higher than the TabItems. How can i stretch the TabItems and place the TextBox in the middle (so that the fill the area)? Can i adjust the Padding dynamically?
http://goo.gl/xcYOY3 The red marked area should be filled and the TextBox centered. Is this possible?
Thx :)
Solution
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0" ContentSource="SelectedContent" />
<TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Row="1" Grid.Column="1" VerticalAlignment="Bottom">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" Height="70" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabPanel}}, Path=ActualHeight}">
<TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20,0" Text="{TemplateBinding Header}" ></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock >1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock >2</TextBlock>
</TabItem>
</TabControl>
</Window>
I have edited your template As per you image ..please run this xaml code separately.
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" />
<Grid Grid.Row="1" Grid.Column="0" Background="LightCyan">
<TabPanel Panel.ZIndex="1" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
</Grid>
<ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Height" Value="50"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" >
<TextBlock SnapsToDevicePixels="True" Margin="5,0,5,0" >
<ContentPresenter x:Name="ContentSite" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="Header" RecognizesAccessKey="True"/>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TabControl>
<TabItem Header="TEST 123">
<TextBlock >1</TextBlock>
</TabItem>
<TabItem Header="TEST 456">
<TextBlock >2</TextBlock>
</TabItem>
</TabControl>
and output from above code is http://prntscr.com/2yc51f
Update
<Style TargetType="TabControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.ColumnSpan="2" Height="50" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" ContentSource="SelectedContent" />
<TabPanel Panel.ZIndex="1" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" IsItemsHost="True" Background="Transparent" />
<ItemsControl Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="1">
<ItemsControl.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Height" Value="50"></Setter>
</Style>
</ItemsControl.ItemContainerStyle>
<Button Background="LightGray" BorderThickness="0">DOMINATES</Button>
</ItemsControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="LightCyan" Height="50">
<TextBlock SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,5,0" Text="{TemplateBinding Header}" ></TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm just begin study WPF, so I'm unfamiliar with style and template.
I want to customize a CheckBox with a Image and two Labels like this:
How can I do?
.xaml
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<CheckBox Width="150"
Height="40"
Margin="4"
Padding="4,0,0,0">
<Grid Background="#FFEEEEEE"
Width="130"
MaxWidth="Infinity">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Margin="5"
Source="/WpfApplication4;component/Images/LargeIcon.png" />
<Label Grid.Row="0"
Grid.Column="1"
Padding="0">
Label1
</Label>
<Label Grid.Row="1"
Grid.Column="1"
Padding="0">
Label2
</Label>
</Grid>
</CheckBox>
</StackPanel>
</Window>
Edit:
.xaml
<Application x:Class="WpfApplication4.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2006"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="MyCheckBox"
TargetType="{x:Type CheckBox}">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Margin" Value="4"/>
<Setter Property="Padding" Value="4,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<DockPanel Background="#FFEEEEEE"
Height="34"
Width="130">
<Image DockPanel.Dock="Left"
Source="/WpfApplication4;component/Images/LargeIcon.png"
Margin="5" />
<TextBlock DockPanel.Dock="Top" Text="Label1" />
<TextBlock DockPanel.Dock="Top" Text="Label2" />
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
used in .xaml
<CheckBox Style="{StaticResource ResourceKey=MyCheckBox}" />
Something be presented, but the small grid is disappeared, like this:
How can I do?
The DockPanel may be the best option for this layout
Example:
<CheckBox>
<DockPanel Height="34">
<Image DockPanel.Dock="Left" Source="/WpfApplication4;component/Images/LargeIcon.png" Margin="2" />
<TextBlock DockPanel.Dock="Top" Text="Label1" />
<TextBlock DockPanel.Dock="Top" Text="Label2" />
</DockPanel>
</CheckBox>
Edit:
It looks like you still want to use the default Checkbox Template but just override the Content in your Style.
Example:
<Style x:Key="MyCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Margin" Value="4"/>
<Setter Property="Padding" Value="4,0,0,0"/>
<Setter Property="Content">
<Setter.Value>
<DockPanel Background="#FFEEEEEE" Width="130" MaxWidth="Infinity">
<Image DockPanel.Dock="Left" Source="Capture.png" Margin="5" />
<TextBlock DockPanel.Dock="Top" Text="Label1" />
<TextBlock DockPanel.Dock="Top" Text="Label2" />
</DockPanel>
</Setter.Value>
</Setter>
</Style>
Result: