How to create a bevelled gradient border in WPF - wpf

I'm trying to create a rounded end progress bar with a beveled border. I've got the progress bar looking like what I want but I'm having difficulty with making the border seemed beveled.
Can anyone help me out with this please?
An image of what I'm trying to get it to look like is here! Bevelled border
My current XAML code for the Window is as follows:
<Window x:Class="SplashDemo2.ProgressBarWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ProgressBarWindow" Height="100" Width="500">
<Window.Resources>
<Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#1D4276" BorderThickness="5"
CornerRadius="15" Padding="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#FFEAEAEA" Offset="0.9"/>
<GradientStop Color="#FF646464"/>
</LinearGradientBrush>
</Border.Background>
<Grid x:Name="PART_Track" >
<Rectangle x:Name="PART_Indicator"
HorizontalAlignment="Left"
RadiusX="10" RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#FF226494" Offset="0.9"/>
<GradientStop Color="#FFEBEFFA"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ProgressBar Value="50" Width="380" Height="25"
Style="{StaticResource ProgressBarStyle}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Window>
Can anyone help me to get the border looking like the image? Many thanks.

It looks to me as though the main thing you're missing is the gradient brush on the border itself.
If you omit BorderBrush="#1D4276" and instead include something like the below, you'll be a lot closer:
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,0.9" StartPoint="0.5,0">
<GradientStop Color="#FFEBEFFA" Offset="0.9"/>
<GradientStop Color="#FF226494"/>
</LinearGradientBrush>
</Border.BorderBrush>

Related

WPF radio button icon change (the circle itself)

I would like to have a group of radio buttons which the circles for un-selected and selected mode are changed to circle icons that I designed.
It that possible to do that in WPF?
Thanks in advance
Create a style and override the default template for RadioButtons. Something like this:
<Window.Resources>
<Style TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="13" Height="13">
<Ellipse x:Name="Border" StrokeThickness="2">
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Green" Offset="0" />
<GradientStop Color="Pink" Offset="1" />
</LinearGradientBrush>
</Ellipse.Stroke>
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="Orange" />
<GradientStop Color="Red"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="CheckMark"
Margin="4"
Visibility="Collapsed">
<Ellipse.Fill>
<SolidColorBrush Color="Purple" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter Margin="4,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True" />
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Yes, of course, it is possible. You can override default ControlTemplate and create style for your own radiobutton. Here is an example, you can also use Style Snooper to see the WPF built-in radio button style (a big piece of XAML code:) )

WPF Datepicker Calendar Style Bug

I am developing a WPF application and I'm using the standard WPF Datepicker.
Here is the XAML Code:
<DatePicker Grid.Column="0" Grid.Row="5" Margin="5,0,5,12"
x:Name="SendungDatePicker" SelectedDate="{Binding Path=ProduktionsDatum}"
ToolTip="{x:Static resx:MetaData.DateTooltip}" />
However, when I use it, the upper part of the calendar isn't displayed correctly:
As you can see, I can't see the month and year.
How can I solve this problem?
Thank you for your help
EDIT
I generated a template for the calendar style:
<Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE4EAF0" Offset="0"/>
<GradientStop Color="#FFECF0F4" Offset="0.16"/>
<GradientStop Color="#FFFCFCFD" Offset="0.16"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
<CalendarItem x:Name="PART_CalendarItem" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Style="{TemplateBinding CalendarItemStyle}" Height="Auto" Width="Auto"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I update the height of the header of the calendar?
If you generate a style for CalendarItem then you will find that Height of Header Button is 20 and FontSize is 10.5. So you override the CalendarItem style and defined either the height of PART_HeaderTemplate or decrease the FontSize.
<Button x:Name="PART_PreviousButton" Grid.Column="0" Focusable="False" HorizontalAlignment="Left" Height="20" Grid.Row="0" Template="{StaticResource PreviousButtonTemplate}" Width="28"/>
<Button x:Name="PART_HeaderButton" Grid.Column="1" FontWeight="Bold" Focusable="False" FontSize="10.5" HorizontalAlignment="Center" Grid.Row="0" Template="{StaticResource HeaderButtonTemplate}" VerticalAlignment="Center"/>
<Button x:Name="PART_NextButton" Grid.Column="2" Focusable="False" HorizontalAlignment="Right" Height="20" Grid.Row="0" Template="{StaticResource NextButtonTemplate}" Width="28"/>
the problem is very simple, the header of your DatePicker is a Button. Surely you have somewhere put a style for your buttons where you specify a height for them.
Solution: if for your buttons you have set ... Height = 20 you must raise the height, Height = 25 Or try until you see that the header is not cut. That's why my friend cuts himself, because the button is not high enough.
I hope this helps someone who ever has this problem, since it's something that drove me crazy.

WP7 Custom Pivot control flickering

Since there is no Border.Effect property in Silverlight for Windows Phone, I managed to recreate a similar effect. What came up after editing the stile of a Pivot control is this:
As you can see the project is one of Visual Studio default templates.
With my custom style, the ItemsPanel is behind that black/gray gradient so, when you scroll the list, it's like items are disappearing.
<Style x:Key="PivotStyle1" TargetType="controls:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache" Grid.RowSpan="3"/>
<Grid Grid.Row="1">
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" VerticalAlignment="Top"/>
<Grid Height="50" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#66000000" Offset="0"/>
<GradientStop Offset="1"/>
<GradientStop Color="#19000000" Offset="0.523"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
<Grid Height="70" Grid.Row="0" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1665CD" Offset="1"/>
<GradientStop Color="#FF5395EC"/>
</LinearGradientBrush>
</Grid.Background>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that whenever I slide towards PivotItems the two Grid with a gradient background flicker. What could be the problem?
UPDATE: The flickering only appears when I navigate back to this page
Solved setting CacheMode to the Grid elements.
For Example:
<Grid Height="70" CacheMode="BitmapCache" Grid.Row="0" VerticalAlignment="Top">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF1665CD" Offset="1"/>
<GradientStop Color="#FF5395EC"/>
</LinearGradientBrush>
</Grid.Background>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"/>
</Grid>
Rather than restyle the Pivot to add a background you'll probably find it much easier to create a single image to use as the page background and leave the Pivot background as transparent.

Silverlight StackPanel inside Border with rounded corners

How is this normally handled? I have this xaml:
<Border Grid.Column="1" HorizontalAlignment="Right"
VerticalAlignment="Top" Margin="10,25,10,0" Opacity="0.7"
BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="LightGray" Offset="0.0" />
<GradientStop Color="Gray" Offset="1.0" />
</LinearGradientBrush>
</StackPanel.Background>
The top left and right corners of the StackPanel are LightGray, and appear to be on top of the Border, so that in the middle of the rounded Black corners is a LightGray pixel or two, breaking up the rounding. The bottom border is Gray instead of Black.
What I thought I would get with the code above is a StackPanel with rounded corners...
I would suggest putting the background on the Border and not the Stackpanel
<Border Grid.Column="1" HorizontalAlignment="Right"
VerticalAlignment="Top" Margin="10,25,10,0" Opacity="0.7"
BorderBrush="Black" BorderThickness="1" CornerRadius="5">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="LightGray" Offset="0.0" />
<GradientStop Color="Gray" Offset="1.0" />
</LinearGradientBrush>
</Border.Background>
<StackPanel>
<!-- Items here -->
</StackPanel>
</Border>

Custom grid style in Silverlight 4

I want to set background of a grid using a style. I style I'm setting the Background Property of the grid.
But I have a border filled with LinearGradientFill and a Path which also has LinearGradientFill in it.
But I'm not able to combine both.
Below is sample code. I want to create it as a style.
<Grid>
<Border BorderBrush="Black" BorderThickness="2">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0.953" />
<GradientStop Color="White" Offset="0" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Path Data="M 0,0 C 0,620 10,10 560,0" Height="60" VerticalAlignment="Top">
<Path.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="0.779" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
It gives me an error as:
The Property 'Value' is set more than once.
Archie,
You need to use a Template in order to place arbitrary XAML into a Style. Unfortuately, only Controls have Templates, and Grids and Borders are not Controls. But there is a solution. Although not as clean as you would like, the following XAMl should accomplish your goal. You paste the following XAML into Charles Petzold's XAML Cruncher to see the results:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="400">
<UserControl.Resources>
<!-- A ContentControl template that defines your background -->
<ControlTemplate x:Key="BackgroundTemplate" TargetType="ContentControl">
<Grid>
<Border BorderBrush="Black" BorderThickness="2">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0.953" />
<GradientStop Color="White" Offset="0" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Path Data="M 0,0 C 0,620 10,10 560,0" Height="60" VerticalAlignment="Top">
<Path.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="0.779" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
<!-- A ContentControl Style that references the background template -->
<Style x:Key="BackgroundStyle" TargetType="ContentControl">
<Setter Property="Template" Value="{StaticResource BackgroundTemplate}" />
</Style>
</UserControl.Resources>
<!-- Typical usage; place the background ContentControl behind your body content -->
<Grid x:Name="LayoutRoot">
<ContentControl Style="{StaticResource BackgroundStyle}" />
<TextBlock Text="Your Content" Foreground="Red" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>

Resources