Add Label that move along my custom Progress-Bar - wpf

I have this GridViewColumn.CellTemplate:
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Margin="-6,0,0,0">
<ProgressBar Name="progressBarColumn"
Minimum="0"
Maximum="100"
Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource CustomProgressBar4}"
Width="350"
Margin="0,0,0,0"/>
<TextBlock x:Name="fileNameTextBlock"
Text="{Binding File}"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
Inside my Progress-Bar instead of show the Percentage i change it to show my Binding File:
Text="{Binding File}"
And my Style:
<Style x:Key="CustomProgressBar4" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar" >
<Grid x:Name="Root">
<Border Name="PART_Track"
CornerRadius="5"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="1"/>
<Border Name="PART_Indicator"
CornerRadius="5"
Background="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="1"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So my Progress-Bar is filled according my Progress value (binding) and i want to add simple Label\TextBlock that will locate on the right side of my Progress-Bar and will show my Progress value.
Any suggestions how to do that ?

just simply define two Grid columns then add a TextBlock to the second column
<Style TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="Root" Grid.Column="0">
<Border Name="PART_Track"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="5" />
<Border Name="PART_Indicator"
HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="1"
CornerRadius="5" />
</Grid>
<TextBlock Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{Binding Path=Value,RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

WPF Progressbar Rectangle

I am using the following ProgressBar Style:
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="400" Background="{TemplateBinding Background}">
<Border x:Name="PART_Track" CornerRadius="2" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="#FFFFFF" />
</Border.BorderBrush>
</Border>
<Border x:Name="PART_Indicator" CornerRadius="2" BorderThickness="1" HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
<Grid ClipToBounds="True" x:Name="Animation">
<Rectangle x:Name="PART_GlowRect" Width="200" HorizontalAlignment="Left"
Fill="#3399FF" Margin="0,0,0,0" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#404040"/>
</Style>
It's working fine but I want to display three rectangles with different colors at a time (Left, Center, Right) as the indicator part, how can I achieve this?
You should change your PART_GlowRect to be a Border instead of a Rectangle, and add the desired rectangles inside that:
<Border x:Name="PART_Indicator" CornerRadius="2" BorderThickness="1" HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
<Grid ClipToBounds="True" x:Name="Animation">
<Border x:Name="PART_GlowRect" Width="150" HorizontalAlignment="Left"
Background="Transparent" Margin="0,0,0,0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="Red" />
<Rectangle Grid.Column="1" Fill="Green" />
<Rectangle Grid.Column="2" Fill="Blue" />
</Grid>
</Border>
</Grid>
</Border>
This is how it will look like:

wpf listview column header vertical line not corresponding to item vertical line

In my wpf application I have a listView with its view set to a gridView. I've defined separately borders for column headers and item cells but they are not inline with each other. In case I'm not too clear, here's an image of the problem:
The styles are as follows:
-> GridView columnHeader:
<Style TargetType="{x:Type GridViewColumnHeader}" x:Key="style_header">
<Setter Property="BorderBrush">
<Setter.Value>
<ImageBrush ImageSource="/images/black_line.png"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="7"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="UpperHighlight" Fill="#FFE3F7FF" Visibility="Collapsed"/>
<Border Padding="{TemplateBinding Padding}" Grid.RowSpan="2">
<ContentPresenter x:Name="HeaderContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0,0,0,1" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</Border>
<Canvas>
<Thumb x:Name="PART_HeaderGripper" Style="{StaticResource GridViewColumnHeaderGripper}"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
-> ListView item:
<ListView x:Name="lstContent">
<ListView.View>
<GridView>
<!-- checkbox column -->
<GridViewColumn HeaderContainerStyle="{StaticResource style_header}">
<GridViewColumn.Header>
<TextBlock Text=""/>
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Border BorderBrush="{StaticResource imgBrushBorder}" BorderThickness="0,0,1,0" Margin="-6,-2,-6,-2">
<CheckBox Tag="{Binding Sync}" IsChecked="{Binding Sync}" Style="{StaticResource style_chkManagement}"/>
</Border>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
This one is in static resources:
<ImageBrush x:Key="imgBrushBorder" ImageSource="/images/black_line.png"/>
Q: What is wrong and how can that be solved?
Any help highly appreciated.

Silverlight, path through TemplateBindings of UserControls

I have a MainPage.xaml with a TextBox (Binding TextBoxText) and some nested UserControls, which all have a TextBox with a TemplateBinding / Binding too (4 TextBoxes).
I would like have the same text in every box, when I change the text somewhere.
The solution: Link
What could I do to synchronize all texts?
Thanks!
MainPage.xaml (TextBoxText is the one, which I like to display everywhere)
<myContDll:DefaultContainerTemplate Caption="NewCaption">
<StackPanel x:Name="myStackPanel">
<sdk:Label Content="Binding TextBoxText of MainPage"/>
<TextBox Text="{Binding TextBoxText}"/>
<myDll:MyButtonControl x:Name="ButtonControl" Count="44"
Button3Caption="NewButton3"
Button3Visibility="Visible"
DisplayText="Form2Text2"
TextBoxText="{Binding TextBoxText}"/>
</StackPanel>
</myContDll:DefaultContainerTemplate>
Generic.xaml:
<Style TargetType="local:MyButtonControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyButtonControl">
<StackPanel>
<sdk:Label Content="inner control test"/>
<sdk:Label Content="TemplateBinding TextBoxText of MyButtonControl"/>
<TextBox Text="{TemplateBinding TextBoxText}"/>
<Button Content="{TemplateBinding Button3Caption}" Visibility="{TemplateBinding Button3Visibility}" x:Name="Button3"/>
<local:CountDisplayControl x:Name="Control1" TextBoxText="{TemplateBinding TextBoxText}" Visibility="{TemplateBinding VisibilityText1}" Count="{TemplateBinding Count}" DisplayText="{TemplateBinding DisplayText1}"/>
<local:CountDisplayControl2 x:Name="Control2" TextBoxText="{TemplateBinding TextBoxText}" Visibility="{TemplateBinding VisibilityText2}" Count="{TemplateBinding Count}" DisplayText="{TemplateBinding DisplayText2}"/>
<local:CountDisplayUserControl TextBoxText="{TemplateBinding TextBoxText}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:CountDisplayControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CountDisplayControl">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel>
<sdk:Label Content="Control1"/>
<sdk:Label Content="{TemplateBinding Count}"/>
<sdk:Label x:Name="labelText" Content="{TemplateBinding Text}"/>
<sdk:Label Content="TemplateBinding TextBoxText of CountDisplayControl"/>
<TextBox Text="{TemplateBinding TextBoxText}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:CountDisplayControl2">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CountDisplayControl2">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel>
<sdk:Label Content="Control2"/>
<sdk:Label Content="{TemplateBinding Count}"/>
<sdk:Label x:Name="labelText" Content="{TemplateBinding Text}"/>
<sdk:Label Content="TemplateBinding TextBoxText of CountDisplayControl2"/>
<TextBox Text="{TemplateBinding TextBoxText}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try setting your Binding Mode to TwoWay binding:
<myContDll:DefaultContainerTemplate Caption="NewCaption">
<StackPanel x:Name="myStackPanel">
<sdk:Label Content="Binding TextBoxText of MainPage"/>
<TextBox Text="{Binding TextBoxText, Mode=TwoWay}"/>
<myDll:MyButtonControl x:Name="ButtonControl" Count="44"
Button3Caption="NewButton3"
Button3Visibility="Visible"
DisplayText="Form2Text2"
TextBoxText="{Binding TextBoxText, Mode=TwoWay}"/>
</StackPanel>
</myContDll:DefaultContainerTemplate>

WPF Groupbox Control Header with Button and text aligned Opposite

I want to achieve such an interface using WPF groupbox control
Is there a way to achieve such an interface with WPF groupbox control?
A simple option is to just overlap the controls and then play around with margins
<Grid>
<GroupBox Header="Title" Margin="0,3,0,0" />
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,10,0">
<Button Margin="2" Content="Suchen"/>
<Button Margin="2" Content="Neu"/>
</StackPanel>
</Grid>
If you wanted a re-usable style then you would need to extract the GroupBox's control template and modify that. Something like
<Page.Resources>
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style x:Key="GroupBoxStyle1" TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="#D5DFE5"/>
<Setter Property="BorderThickness" Value="1"/>
<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 x:Name="Header" Grid.Column="1" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2">
<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ContentPresenter Grid.ColumnSpan="2" Grid.Column="1" Margin="{TemplateBinding Padding}" Grid.Row="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" CornerRadius="4" Grid.Row="1" Grid.RowSpan="3">
<Border.OpacityMask>
<MultiBinding ConverterParameter="7" Converter="{StaticResource BorderGapMaskConverter}">
<Binding ElementName="Header" Path="ActualWidth"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Border>
</Border>
<StackPanel Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" >
<Button Margin="2" Content="Suchen"/>
<Button Margin="2" Content="Neu"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Grid>
<GroupBox Header="Title" Style="{StaticResource GroupBoxStyle1}"></GroupBox>
</Grid>
</Grid>
I needed the same thing, found the answer here:
http://wpf.2000things.com/2013/06/05/835-displaying-custom-content-in-a-groupbox-header/
Don't know which version of .NET
Simple example:
<GroupBox>
<GroupBox.Header>
<StackPanel Orientation="Horizontal">
<Button Content="Click Me"/>
<Button Content="Click Me Too"/>
</StackPanel>
</GroupBox.Header>
<TextBlock Text="Content of box"/>
</GroupBox>

How can i bind parent's property to its child's property?

I have a GroupBox, which is defined like this
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Groupbox"
>
<Style TargetType="local:GroupBox">
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:GroupBox">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderThickness="{TemplateBinding BorderThickness}" Grid.Row="1" Grid.RowSpan="2" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
<Border.Clip>
<GeometryGroup FillRule="EvenOdd">
<RectangleGeometry x:Name="FullRect" Rect="0,0,300,200"/>
<RectangleGeometry x:Name="HeaderRect" Rect="6,0,100,100"/>
</GeometryGroup>
</Border.Clip>
</Border>
<ContentPresenter Grid.Row="2" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ContentControl x:Name="HeaderContainer" Margin="6,0,0,0" Grid.Row="0" Grid.RowSpan="2" HorizontalAlignment="Left">
<ContentPresenter Margin="3,0,3,0" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}"/>
</ContentControl>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And i'm using this control like this
<Controls:GroupBox x:Name="GroupBox">
<Controls:GroupBox.HeaderTemplate>
<DataTemplate>
<CheckBox "Header" x:Name="cbHeader"/>
</DataTemplate>
</Controls:GroupBox.HeaderTemplate>
<Controls:GroupBox>
So, well, my questions - how can i bind property IsEnabled of GroupBox to the Checkbox property IsChecked?
Thanks in advance.
Didn't try it but you should be able to do something like this:
<Controls:GroupBox x:Name="MyGroupBox">
<Controls:GroupBox.HeaderTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding Path=IsEnabled, ElementName=MyGroupBox, Mode=TwoWay}" Content="Header" x:Name="cbHeader" />
</DataTemplate>
</Controls:GroupBox.HeaderTemplate>
<Controls:GroupBox>
In fact there was no need to define DataTemplate. This code works the same way.
<Panels:GroupBox>
<Panels:GroupBox.Header>
<CheckBox Content="Header" x:Name="cbHeader" IsChecked="{Binding IsHeaderChecked}" />
</Panels:GroupBox.Header>
<ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" IsEnabled="{Binding Path=IsChecked, ElementName=cbHeader}"/>
</Panels:GroupBox>

Resources