could you please help with styling vertical progress bar with solid color?
I've been able to create this style
<Style TargetType="{x:Type ProgressBar}" x:Key="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Rectangle Name="PART_Track" StrokeThickness="1" >
<Rectangle.Fill>
<SolidColorBrush Color="#FF00FF00"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<DockPanel Margin="1">
<Rectangle Name="PART_Indicator">
</Rectangle>
<Rectangle Name="Mask" MinWidth="{TemplateBinding Width}" Fill="#C0C0C0"/>
</DockPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But it still is oriented horizontally and I don't know how to change it.
There is a ControlTemplate.Triggers in the default Template. This trigger rotates the angle by -90°.
If you add
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
to your control and name the parenting grid "TemplateRoot" you can set the orientation.
Here's your template
<Style TargetType="{x:Type ProgressBar}" x:Key="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot">
<Rectangle Name="PART_Track" StrokeThickness="1" >
<Rectangle.Fill>
<SolidColorBrush Color="#FF00FF00"></SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
<DockPanel Margin="1">
<Rectangle Name="PART_Indicator">
</Rectangle>
<Rectangle Name="Mask" MinWidth="{TemplateBinding Width}" Fill="#C0C0C0"/>
</DockPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I want to style my TabControl to have items similar to this:
I tried to the combination of Border (with right thickness of 0) and triangle shaped polygon with pushing the polygon out of bound a bit to overlap, but its not really working as the out of bounds part of polygon gets hidden. Here is my attempt and now I am stuck and don't really know what else to try:
<!-- Styles -->
<Style TargetType="{x:Type TabItem}">
<Setter Property="Padding" Value="15 0 15 0" />
<Setter Property="Background" Value="#f5f5f5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid ClipToBounds="False">
<Border x:Name="PART_Border"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderThickness="1 1 0 1"
BorderBrush="LightGray">
<ContentPresenter ContentSource="Header" VerticalAlignment="Center" />
</Border>
<Polygon Points="0,0 20,25, 0,50"
Stroke="#e8e8e8"
Fill="#ffffff"
HorizontalAlignment="Right"
Margin="0 0 -10 0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="#ffffff" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Content -->
<TabControl>
<TabItem Header="First" />
<TabItem Header="Second" />
<TabItem Header="Third" />
</TabControl>
This will do the job for you:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#f5f5f5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Path x:Name="Back" Data="M0,0 L 80,0 L100,20 L80,40 L0,40 L 20,20 " Stretch="None" VerticalAlignment="Stretch"
Stroke="#e8e8e8" StrokeThickness="2"
Fill="{TemplateBinding Background}"
HorizontalAlignment="Stretch" Margin="-30,0,0,0"/>
<ContentPresenter ContentSource="Header" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Back" Property="Fill" Value="#ffffff" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Instead of the border and polygon I used a Path to draw the shape for you.
You can use - (minus) values in margins to overlap items.
Result:
In a Button ControlTemplate I need to access the IsPressed event. How do I do that?
Background: I added a drop DropShadowEffect to a Button Style but got blurry text. This fix solved the blurry text issue. However this added a new issue. I wanted to remove the DropShadowEffect when the user clicks on the button. Figured I would do it like this;
<Style x:Key="DropShadowButtons" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{TemplateBinding Background}">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Opacity="0.5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Button.IsPressed" Value="False">
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="0" BlurRadius="0" Opacity="0" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,2,5,0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Then figured out that Button.IsPressed would not fire being part of the Border. So how does the ControlTemplate access the event IsPressed of the Button?
You just need the trigger on the ControlTemplate instead of the Border's Style. For the Setter to target the Border, you'll need to give the Border a name, and you'll need to give the Setter a TargetName:
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border x:Name="BackgroundBorder" Background="{TemplateBinding Background}">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Border.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Opacity="0.5" />
</Setter.Value>
</Setter>
</Style>
</Border.Style>
</Border>
<Border Background="{TemplateBinding Background}">
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="5,2,5,0"
/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BackgroundBorder" Property="Effect">
<Setter.Value>
<DropShadowEffect
Color="Black"
Direction="320"
ShadowDepth="0"
BlurRadius="0"
Opacity="0"
/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
i have a simple interface that has two tabs vertically on the left side.
I have rounded the edges of the windows and the tabitems but i want the last tab(it happens to be the second but i would like it like that even if it was fifth or tenth) to not have rounded edges.
Heres the code, hope you can understand what i am trying to do cause i am new to this.
tle="MainWindow" Height="359" Width="504" Topmost="True" BorderThickness="0" WindowStyle="None" AllowsTransparency="True" BorderBrush="Black" Background="#0CFFFFFF">
<Window.Resources>
<LinearGradientBrush x:Key="SelectedBorderBrush" StartPoint="0,0" EndPoint="1,0" >
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="Gray" Offset="0.965"/>
<GradientStop Color="WhiteSmoke" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush >
<Style TargetType="{x:Type TabControl}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel >
<Border
Panel.ZIndex="50"
Margin="0,10,-1,0"
Background="#FF0072C5"
BorderBrush="Gray"
CornerRadius="7,0,0,7"
BorderThickness="1">
<TabPanel
Margin="0,0,0,0"
IsItemsHost="True" />
</Border>
<Border
Background="WhiteSmoke"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="7,7,7,0" >
<ContentPresenter
ContentSource="SelectedContent" />
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Background="#FF0072C5"
CornerRadius="7,0,0,0"
BorderBrush="Gray"
BorderThickness="0,0,0,1"
Panel.ZIndex="50"
Margin="0,0,0,0"
>
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="50,10,50,10"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter Property="Margin" Value="0,0,-2,0" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{StaticResource SelectedBorderBrush}"/>
<Setter TargetName="Border"
Property="Background"
Value="WhiteSmoke" />
<Setter TargetName="Border"
Property="CornerRadius"
Value="7,0,0,7" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<!--<Setter Property="Background" Value="Black" />-->
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Background" Value="Black" />-->
<Setter Property="Foreground" Value="#FF0072C5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid >
<TabControl Name="_menuTabControl" TabStripPlacement="Left" Margin="10,0" BorderThickness="1" ClipToBounds="True" Height="359" VerticalAlignment="Top" >
<TabItem Name="_tabItem1" Header="Name1" BorderThickness="1" Margin="0">
<Grid Width="334" Height="280" HorizontalAlignment="Stretch" Margin="0,25">
<!-- secret stuff here that i didnt copy :P -->
</Grid>
</TabItem>
<TabItem Name="_tabItem2" Header="Name2" BorderThickness="1" Margin="0" >
</TabItem>
</TabControl>
</Grid>
You can set style specific to tab items by giving x:Key value to style
<Style x:Key="TabItemRounded" TargetType="{x:Type TabItem}" >
Now set the style to TabItemRounded only for tabs where you want that style
<TabControl >
<TabItem Header="ABC" Style="{StaticResource TabItemRounded}"></TabItem>
<TabItem Header="PQR"></TabItem>
</TabControl>
So I was suggested to use WPF forms to make a custom UI for my applications. The first thing I wanted to try was to change the look of the progress bar. The only thing holding me back from it's new look atis the glossy effect over the top of it. I want the progrss bar to be made of mostly solid colours. Is there anyway to remove the glossy part of the progress bar?
Shown here:
Thanks.
Nasreddine answers is very good but if you want something simpler you can use the following
<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#D9DCE1" BorderThickness="1" Background="#E8E8E8" CornerRadius="0" Padding="0">
<Grid x:Name="PART_Track">
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF49A3E1" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can achieve any style you want by editing the ControlTemplate of the progress bar. Here's an example :
Disclaimer: I'm not a designer.
<!-- Brushed used by the progress bar style -->
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" MappingMode="Absolute" StartPoint="-100,0">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#FF000000" Offset="0.4"/>
<GradientStop Color="#FF000000" Offset="0.6"/>
<GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBarTopHighlight" Color="#80FFFFFF" />
<!-- progress bar style -->
<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground" Value="#01D328"/>
<Setter Property="Background" Value="#C7C7C7"/>
<Setter Property="BorderBrush" Value="#B2B2B2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="Background" SnapsToDevicePixels="true">
<Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
<Border Background="{x:Null}" CornerRadius="2" Margin="1"/>
<Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Background="{StaticResource ProgressBarTopHighlight}" Margin="1"/>
<Rectangle x:Name="PART_Track" Margin="1"/>
<Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
<Grid x:Name="Foreground">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition MaxWidth="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="Indicator" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2"/>
<Rectangle x:Name="Animation" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2">
<Rectangle.OpacityMask>
<MultiBinding>
<MultiBinding.Converter>
<Themes:ProgressBarHighlightConverter/>
</MultiBinding.Converter>
<Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
<Binding ElementName="Background" Path="ActualWidth"/>
<Binding ElementName="Background" Path="ActualHeight"/>
</MultiBinding>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</Decorator>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="Background">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="PART_Track">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="PART_Indicator">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="LayoutTransform" TargetName="Foreground">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate" Value="true">
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsIndeterminate" Value="false">
<Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Apply this style to your ProgressBar and you're good to go :
<ProgressBar Style="{StaticResource FlatProgressBar}" Value="50" />
Here's the end result :
I searched the last hours for a custom control that looks like this:
Triangular volume control
It's like a simple slider, but this growing size to the right side is my problem.
I don't know how to do this.
Have anyone an idea?
You can define a geometry that has the shape of a triangle and use that as a OpacityMask of the Track. The Track has a repeat button on the left to decrease the value and on the right to increase it. You just need to bind the background of the left button to the background of your slider along with the background of the thumb. You also should make the templates of both the thumb and the repeaters very simple to only show the background color.
Here is an example style:
<Style TargetType="{x:Type Slider}">
<Setter Property="Background" Value="Gray"/>
<Setter Property="Height" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<ControlTemplate.Resources>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<PathGeometry x:Key="Triangle">
<PathFigure StartPoint="0,1">
<LineSegment Point="1,1"/>
<LineSegment Point="1,0"/>
<LineSegment Point="0,1"/>
</PathFigure>
</PathGeometry>
</ControlTemplate.Resources>
<Grid>
<Grid>
<Grid.OpacityMask>
<DrawingBrush>
<DrawingBrush.Drawing>
<GeometryDrawing Brush="Black" Geometry="{StaticResource Triangle}"/>
</DrawingBrush.Drawing>
</DrawingBrush>
</Grid.OpacityMask>
<Track Name="PART_Track" Value="{TemplateBinding Value}">
<Track.Thumb>
<Thumb Width="10" Background="{TemplateBinding Background}">
<Thumb.Template>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
<Track.DecreaseRepeatButton>
<RepeatButton Background="{TemplateBinding Background}" Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Background="Transparent" Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
</Track>
</Grid>
<Path
Data="{StaticResource Triangle}"
Stretch="Fill"
Stroke="Black"
StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
(This is just an example which disregards a lot of things like e.g. the Orientation)