I have a style for a progressbar that shows some text only on the PART_Indicator section:
<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<Border Name="PART_Track" CornerRadius="15" Background="{StaticResource PressedBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" />
<Border Name="PART_Indicator" CornerRadius="15" Background="#CEAC2D" BorderBrush="#CEAC2D" BorderThickness="1" HorizontalAlignment="Left" >
<Viewbox>
<TextBlock TextAlignment="Center" Background="Transparent" FontFamily="Times" Foreground="Black" Margin="2,2,2,2"
Text="{Binding ProgressText}"/>
</Viewbox>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a few bars and each one should show a different kind of text (50%, 2/8, etc..) and that of course is handled by the VM.
My question is how to use this style for all the bars but differentiate only that textblock text. I presume the binding is not correct .. I probably need a TemplateBinding, but to what property?
Related
I am trying to add a border thickness to my first navigation button. Normally, you can easily add a BorderThickness to a button but when I add my own style it hides the BorderThickness and BorderBrush. I added a BorderThickness to the style (0,0,0,1) but am not able to have a border thickness of (0,1,0,0) to the first initial button. Any ideas?
<UserControl.Resources>
<Style x:Key="navButtStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderThickness="0,0,0,1" BorderBrush="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Button Style="{StaticResource navButtStyle}"
x:Name="navButton1"
Grid.Row="1"
Content="TR"
Background="#33333D"
FontFamily="Roboto"
FontSize="65"
FontWeight="Bold"
Foreground="White"
BorderBrush="Black"
BorderThickness="0,1,0,0"
HorizontalContentAlignment="Center"
ToolTip="navButton0"
Click="navButton1_Click"
/>
<Button Style="{StaticResource navButtStyle}" x:Name="navButton2" Grid.Row="2" Background="#33333D" ToolTip="navButton2">
<Grid>
<TextBlock Text="" Padding="30,30,0,0" FontSize="56" FontFamily="Material Design Icons Desktop" Foreground="White"/>
<TextBlock Text="" Padding="0,0,30,30" FontSize="56" FontFamily="Material Design Icons Desktop" Foreground="White"/>
</Grid>
</Button>
<Button Style="{StaticResource navButtStyle}" x:Name="navButton3" Grid.Row="3" Content="SL" Background="#33333D" FontFamily="Roboto" FontSize="65" FontWeight="Bold" Foreground="White" HorizontalContentAlignment="Center" ToolTip="navButton3" />
Navigation Buttons
property value hardcoded in Template cannot be easily changed from outside. use TemplateBindings instead:
<Style x:Key="navButtStyle" TargetType="Button">
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So i have this Progress-Bar and on its right side simple Border that inside this Border i want to put Label (The Progress-Baris on the left side):
And here after this 2 Progress-Bar is with value of 100%:
As you can see i can see the Progress-Bar Corner Radius and i want my Border left side will be with negative Corner Radius
My Progress-Bar style:
<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<Border Name="PART_Track"
CornerRadius="5,0,0,5"
Background="{DynamicResource ProgressBarBackgroundColor}"
BorderBrush="{DynamicResource ProgressBarBackgroundColor}"
BorderThickness="0" />
<Border Name="PART_Indicator"
CornerRadius="8"
Background="{DynamicResource ProgressBarFillBackgroundColor}"
BorderBrush="{DynamicResource ProgressBarFillBackgroundColor}"
BorderThickness="0"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML
<StackPanel Orientation="Horizontal">
<ProgressBar Name="progressBar"
Height="20"
Width="700"
Minimum="0"
VerticalAlignment="Center"
Maximum="100"
HorizontalAlignment="Left"
Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}"
Style="{StaticResource {x:Type ProgressBar}}"
Margin="0,0,0,0"/>
<Border Width="40"
Height="19"
VerticalAlignment="Center"
HorizontalAlignment="Left"
CornerRadius="0,5,5,0"
Margin="0,0,0,0">
<Border.Background>
<SolidColorBrush Color="#FF343D46" Opacity="0.4"/>
</Border.Background>
</Border>
</StackPanel>
**UPDATE**
In essence what you want to do is when you have a progress bar value of 100 you want to apply a different template too the one you have when you are just displaying the progress bar. Use the following XAML:
You can see that in the trigger template - the corner radius property has been set too zero for the correct corners of the progress bar track.
<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<Border Name="PART_Track"
CornerRadius="5,0,0,5"
Background="{DynamicResource ProgressBarBackgroundColor}"
BorderBrush="{DynamicResource ProgressBarBackgroundColor}"
BorderThickness="0" />
<Border Name="PART_Indicator"
CornerRadius="5"
Background="{DynamicResource ProgressBarFillBackgroundColor}"
BorderBrush="{DynamicResource ProgressBarFillBackgroundColor}"
BorderThickness="0"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Value" Value="100">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<Border Name="PART_Track"
CornerRadius="5,0,0,5"
Background="{DynamicResource ProgressBarBackgroundColor}"
BorderBrush="{DynamicResource ProgressBarBackgroundColor}"
BorderThickness="0" />
<Border Name="PART_Indicator"
CornerRadius="5,0,0,5"
Background="{DynamicResource ProgressBarFillBackgroundColor}"
BorderBrush="{DynamicResource ProgressBarFillBackgroundColor}"
BorderThickness="0"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
This will result in the following behaviour:
so i have a TextBox, and i set a template to it, but i cannot get the text of the TextBox to display. what am i doing wrong, i followed This Question but i still do not have it working.
<UserControl.Resources>
<Style TargetType="TextBox" x:Key="txtReg">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="2" CornerRadius="5" BorderBrush="Black" Background="Yellow" >
<ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
TextBox
<TextBox x:Name="txtHdrReg" Grid.Row="0" Grid.Column="1" FontSize="40" TextAlignment="Center" Padding="10,0" Height="60" Width="260" Text="REG" Style="{ThemeResource txtReg}" />
but still the text isn't displaying, any idea???
I have a button with a style in my code. The Style is in the resources of the .xaml file:
<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="8" BorderBrush="#006AB6" BorderThickness="1" Name="border" >
<Grid x:Name="grid" >
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers></ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here's the code for the button:
<Button Name="btnZ" Background="Red" Content="{Binding Z}" Grid.Column="2" Style="{DynamicResource RoundCorner}" Visibility="{Binding Path=IsButtonVisible, Converter={StaticResource boolToVisibilityConverter}}"/>
The background property for the button, in which I set the property to Red - doesn't work. Why is that happening?
You have to map the Background of the Button to the Background of the inner ControlTemplate (whose the root visual is the Border) using TemplateBinding (for convenience):
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="8" BorderBrush="#006AB6" BorderThickness="1"
Name="border"
Background="{TemplateBinding Background}"
/>
<!-- ... -->
</ControlTemplate>
need to have flat border style for wpf based textbox... really surprised to see there is no easy way to get this like was in winforms textbox BorderStyle.FixedSingle
is there any easy way to get this done for wpf textbox
The way to do this is to use a control template to draw the border yourself. You can do this in many different ways, heres a couple for you to look at.
The quick hack approach:
<TextBox>
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Rectangle Stroke="{StaticResource ResourceKey=detailMarkBrush}" StrokeThickness="1"/>
<TextBox Margin="1" Text="{TemplateBinding Text}" BorderThickness="0"/>
</Grid>
</ControlTemplate>
</TextBox.Template>
</TextBox>
and then theres using resources...
<ResourceDictionary>
<Color x:Key="detailMark">#FFA1A9B3</Color>
<SolidColorBrush x:Key="detailMarkBrush" Color="{StaticResource ResourceKey=detailMark}" />
<Style x:Key="flatTextBox" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Rectangle Stroke="{StaticResource ResourceKey=detailMarkBrush}" StrokeThickness="1"/>
<TextBox Margin="1" Text="{TemplateBinding Text}" BorderThickness="0"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
and then you can use the style:
<TextBox Style="{StaticResource ResourceKey=flatTextBox}" />
<TextBox BorderThickness="1" BorderBrush="Black">
just try this by black or gray
This is better way to me, make a custom template with border, to override the default one.
And most important make ScrollViewer named PART_ContentHost, to fit inner TemplatePart, and for any other features work like default.
simular to example from MSDN:
<Style TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border CornerRadius="2" Padding="2" Background="#19212F" BorderBrush="Red" BorderThickness="1">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>