I got a TabControl with two TabItems, I created a template for it.
<TabControl x:Name="MainInfoTabControl" Grid.Row="3" Grid.RowSpan="7" Grid.Column="0" Grid.ColumnSpan="2"
Background="{x:Null}"
BorderBrush="{x:Null}"
>
<TabControl.Resources>
<Style x:Key="TabHeaderStyle" TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="FontWeight" Value="DemiBold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="HeaderBorder" BorderBrush="White" BorderThickness="2" CornerRadius="10,10,0,0" >
<TextBlock Text="" VerticalAlignment="Center" Margin="5"></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Main Details"
Margin="0.5, 0.5, 0, 0.5"
FontSize="15"
MinHeight="40" Width="200"
Style="{StaticResource TabHeaderStyle}"
>
</TabItem>
<TabItem Header="Pets Owned"
Margin="0.5, 0.5, 0, 0.5"
FontSize="15"
MinHeight="40" Width="200"
Style="{StaticResource TabHeaderStyle}"
>
</TabItem>
</TabControl>
The problem is the tabItem's Header doesn't show up. In my template there is a TextBlock but i couldn't customize the TextBlock.Text dynamically (atleast bind or somewhat change the Text property during run time)
TabItem1 should be "Owner Details" while TabItem2 should be "Pets Owned"
You override default tabitem template you need to get somehow to parent's value.
<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}"
VerticalAlignment="Center"
Margin="5">
</TextBlock>
or
<TextBlock Text="{TemplateBinding Property=Header}"
VerticalAlignment="Center"
Margin="5">
</TextBlock>
Related
it's my first question here so be gentle haha
I am using a WPF TextBox Element to enter some user information, in this example it's a username.
My problem with this is that I am able to scroll within the TextBox which I don't want, as it just looks terrible even if it is just a bit.
So I am looking for an option to turn the scrolling off. As you can see I am using a ScrollViewer, as the documentation suggests but if there are any other options for styling the TextBox I am more then willing to try :D
Thanks in advance.
<Style TargetType="{x:Type TextBox}"
x:Key="textBox1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border CornerRadius="16"
Background="{TemplateBinding Background}">
<ScrollViewer Margin="10,7.5"
x:Name="PART_ContentHost"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
=> This is the Style of the TextBox in a RessourceDic.
<StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Grid Height="250"/>
<TextBlock x:Name="Error"
FontSize="14"
Foreground="DarkRed"
FontWeight="Bold"
Margin="5"
TextWrapping="Wrap"/>
<TextBlock Text="Benutzername" Margin="15,0,0,10" FontSize="20"/>
<TextBox Margin="0,0,20,0"
Background="#F2E3D5"
x:Name="Username"
Style="{StaticResource textBox1}"
Width="230"
Height="35"
FontSize="21">
</TextBox>
<TextBlock Text="Passwort" Margin="15,20,0,10" FontSize="20"/>
<PasswordBox Margin="0,0,20,0"
Background="#F2E3D5"
x:Name="Password"
Style="{StaticResource passwordBox1}"
FontSize="21">
</PasswordBox>
<Button x:Name="LogIn" Height="40" Width="120" Style="{StaticResource LogInBTN}" Foreground="Black" Margin="0,30,0,0" Click="LogInBTN_Click">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="images/user.png" Height="25" Width="25" VerticalAlignment="Center"/>
<TextBlock Text="Einloggen" Margin="10,2,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
</Button>
<TextBlock Margin="0,20,0,0" Height="20" Width="250" Text="X - Passwort nicht korrekt" TextAlignment="Center" FontSize="16" Foreground="Red" Visibility="Hidden"/>
</StackPanel>
=> This is the Stackpanel where I use the TextBox.
as workaround, without overriding ScrollViewer:
<TextBox Height="30" Width="50">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Decorator x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
I've this code with TabItems added Dynamycally in CodeBehind (C#):
<TabControl x:Name="tabList" Grid.Column="2" HorizontalContentAlignment="Stretch" Background="Transparent" SelectionChanged="tabList_SelectionChanged" IsSynchronizedWithCurrentItem="True">
<TabControl.Resources>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<Button x:Name="btnDelete" BorderThickness="0" Background="Transparent" DockPanel.Dock="Right" Margin="5,0,0,0" Padding="0" Click="btnDelete_Click" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
<Image Source="myImage></Image>
</Button>
<ToggleButton x:Name="btnPin" Checked="btnDisablex" Unchecked="btnDisablex" BorderThickness="0" Background="Transparent" DockPanel.Dock="Right" Margin="5,0,0,0" Padding="0" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}">
<ToggleButton.Style>
//Many Useless Things
</ToggleButton.Style>
</ToggleButton>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" />
</DockPanel>
</DataTemplate>
<Style TargetType="TextBox">
//Other Many Useless Things
</Style>
</TabControl.Resources>
</TabControl>
And with the following Style in User Resources:
<Style TargetType="{x:Type TabItem}">
<Setter Property="AllowDrop" Value="True"/>
<EventSetter Event="PreviewMouseMove" Handler="TabItem_PreviewMouseMove"/>
<EventSetter Event="Drop" Handler="TabItem_Drop"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,-4,0"
Background="White"
BorderBrush="#888"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
//Many Useless MultiTrigger and Datatrigger
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The code is working fine, until I add more tabs and the window width is no longer enough, but the TabControl behaviour is strange: the TabItem width becomes larger and the first TabItems disappear.
I just want the TabItem width reduces or just that the olders "disappear" but keeping always the same width. Why this is not working?
This is the screenshot taken in normal conditions
Normal view working OK
Here it's clear the problem: when I add more tabs (or I reduce the window/grid width) the tab width becomes larger
Tab View Problem
I'm currently trying to apply styling to my menuItem. I had to center it's header inside the control, and the only way to it that I had found is this:
<MenuItem>
<MenuItem.Header>
<TextBlock Text="About" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</MenuItem.Header>
</MenuItem>
Now, I am trying to apply styles, but I can't seem to manage to bind the textboxes' text from style to the actual xaml value.
My style:
<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#0a99f3" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Grid Background="{TemplateBinding Background}">
<MenuItem>
<MenuItem.Header>
<TextBlock Text="{TemplateBinding Text}" />
</MenuItem.Header>
</MenuItem>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TemplateBinding is just one of the approaches I tried, though none worked even remotely close.
EDIT - FULL XAML ON REQUEST:
<Window x:Class="DownloadManager.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:DownloadManager"
xmlns:controls="clr-namespace:DesignInControl"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="1000" Background="#22282a" ResizeMode="NoResize">
<Border BorderThickness="1" BorderBrush="#ffcd22" Margin="10,10,10,10">
<Grid>
<controls:CircularProgressBar VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" SegmentColor="#ffcd22" StrokeThickness="5" Percentage="100" Radius="80" Grid.ZIndex="0"/>
<Border VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,10,10" Width="170" Height="170">
<TextBlock FontSize="60" Text="10%" FontFamily="simplifica" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Image x:Name="noshare_png" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="-8,10" Source="noshare.png" Width="100" Height="100"/>
<Border Width="210" Height="100" Margin="97,10,665,540">
<TextBlock Text="NoShare" FontSize="85" FontFamily="simplifica" Foreground="#ffcd22" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<Menu x:Name="menu" HorizontalAlignment="Left" Height="100" Margin="352,10,0,0" VerticalAlignment="Top" Width="600" FontFamily="simplifica" FontSize="30">
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="File"/>
</MenuItem.Header>
</MenuItem>
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="Settings"/>
</MenuItem.Header>
</MenuItem>
<MenuItem Height="100" Width="200" Style="{StaticResource MenuItemBaseStyle}">
<MenuItem.Header>
<TextBlock Text="About"/>
</MenuItem.Header>
</MenuItem>
</Menu>
</Grid>
</Border>
</Window>
Use MenuItem.HeaderTemplate.
<Style x:Key="MenuItemBaseStyle" TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#0a99f3" />
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Updated: Combined your style with the original solution.
I am working on a C# WPF project and I have a list view which uses data binding and a collection view.
Below is how my ListView is currently populated.
<ListView HorizontalAlignment="Left" Margin="547,12,0,41" Name="lstCallLogInformation" Width="320">
<ListView.Style>
<Style TargetType="ListView">
<Style.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<TextBlock Text="No items in your devices call log" FontWeight="Bold" HorizontalAlignment="Center" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListView.Style>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Foreground="Gray" Text="{Binding Name}" VerticalAlignment="Bottom" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Control.HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel Style="{StaticResource onmouseover}">
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal" Tag="{Binding logID}">
<Image Height="30" Source="{Binding base64ImageString, Converter={StaticResource ImageConverter}}" Width="30" />
<StackPanel Margin="10" Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="{Binding contactNameOrPhoneNumber}" />
<StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Left" Text="{Binding dateString}" />
<TextBlock Margin="15, 0, 0, 0" Text="Duration: " />
<TextBlock HorizontalAlignment="Right" Text="{Binding humanReadableCallDuration}" />
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical">
<Button Background="Transparent" BorderThickness="0" BorderBrush="Transparent" Tag="{Binding logID}" Name="btnAddAsContact" Click="btnAddAsContact_Click">
<Image Width="15" Height="15" Source="/BoardiesSMSServer;component/images/add.png" Tag="{Binding logID}" />
</Button>
<Button Background="Transparent" BorderThickness="0" BorderBrush="Transparent" Tag="{Binding logID}" Name="btnDeleteContactFromLog" Click="btnDeleteContactFromLog_Click">
<Image Width="15" Height="15" Source="/BoardiesSMSServer;component/images/delete.png" Margin="0,0,0,5" Tag="{Binding logID}" />
</Button>
</StackPanel>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Within my DockPanel within the DataTemplate I have a StackPanel which contains various TextBlocks from the array that is passed into the binding.
In one of the StackPanels you will see you will see a TextBlock that binds to the element of contactNameOrPhoneNumber.
What I want to be able to do is if another value from the binding is null then I add a TextBlock for the contactNameOrPhoneNumber` element and alongside it have another TextBlock which contains another element of number``, if the other binding value is not null then this extra textblock of number is not added.
So in simple terms, what I want to be able to do is within the DataTemplate have a conditional if statement of if binding value == null add textblock to stackpanel else don't add textblock.
You can do that with Style + Triggers something like this:
<TextBlock>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding PropertyName}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
Also you can create IValueConverter say ObjectToVisibilityConverter which will take input your property and if property is null return Visibility.Collapsed else return Visibility.Visible.
You can then bind property with Visibility value of TextBlock via Converter.
<TextBlock Visibility="{Binding PropertyName,
Converter={StaticResource ObjectToVisibilityConverter}}"/>
I am currently prototyping a simple GUI program where I ran into what I hope is a quick fix with Tab Control customization. My tabs are currently set to "Light Sky Blue" when they are active. I have two tab boxes, and one of them I would like to change to Blue Violet. When I enter the code for the color in the area for the tabs that I would like to change, nothing happens.
Note for Code: I am trying to change the File, Options and Help tabs. You will be able to see in my code that I tried to set the background to "BlueViolet".
Let me know if you need a picture.
Here is my code:
<!---Main Class-->
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CartTools" Height="700" Width="1135" Name="Practice" FontSize="14" Opacity="1">
<Window.Resources>
<!---Tab items for Cart customization-->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Background="LightBlue"
BorderBrush="Black"
BorderThickness="1,1,1,1"
CornerRadius="30,6,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="LightGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="AliceBlue">
<!---File, Options, Help tabs-->
<TabControl HorizontalAlignment="Left" Name="TabControl1" Width="215" Margin="0,0,0,286">
<TabItem Header="File" Name="TabItem1" Background="BlueViolet">
<Grid>
<Label Height="28" Margin="6,6,79,0" Name="Label1" VerticalAlignment="Top">New</Label>
<Button Height="23" HorizontalAlignment="Left" Margin="6,40,0,0" Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>
</Grid>
</TabItem>
<TabItem Header="Options" Name="TabItem2" Background="BlueViolet">
<Grid />
</TabItem>
<TabItem Header="Help" Name="TabItem3" Background="BlueViolet">
<Grid />
</TabItem>
</TabControl>
<!---Cart Management Tabs-->
<TabControl Margin="251,0,12,12" Name="TabControl2">
<TabItem Header="CartFunctions" Name="TabItem4">
<Grid>
<RadioButton Height="16" Margin="6,6,0,0" Name="RadioButton1" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120">RadioButton</RadioButton>
<RadioButton Height="16" HorizontalAlignment="Left" Margin="6,28,0,0" Name="RadioButton2" VerticalAlignment="Top" Width="120">RadioButton</RadioButton>
<CheckBox Height="16" HorizontalAlignment="Left" Margin="6,50,0,0" Name="CheckBox1" VerticalAlignment="Top" Width="120">CheckBox</CheckBox>
</Grid>
</TabItem>
<TabItem Header="Cart Configuration" Name="TabItem5">
<Grid />
</TabItem>
<TabItem Header="Cart I/O" Name="TabItem6">
<Grid />
</TabItem>
<TabItem Header="CMS" Name="TabItem7">
<Grid />
</TabItem>
<TabItem Header="Blocking Database" Name="TabItem8">
<Grid></Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
Thank you!
Use TemplateBinding to get the local value from the Control in ControlTemplate.
<ControlTemplate TargetType="{x:Type TabItem}">
<Border Background="{TemplateBinding Background}">
...
</Border>
</ControlTemplate>
Then you will see two different backgrounds
<TabControl>
<TabItem Background="LightSkyBlue" />
<TabItem Background="BlueViolet" />
</TabControl>
If you want different colors only for IsSelected is true or false use TemplateBinding in ControlTemplate.Triggers.