I'm having a slight problem with reskinning a ProgressBar in WPF. Specifically, no matter what I do, it seems to clip the inner indicator at about 99%. I've tried all sorts of things, from clipping to OpacityMask, but I can't seem to stop the top from cutting off. Any ideas what's going on here?
Code:
<Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Value" Value="100" />
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
<Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Grid>
<Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
<Border x:Name="Indicator_Gloss" CornerRadius="10" >
<Border.Background>
<LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
<GradientStop Color="#75000000" Offset="0"/>
<GradientStop Color="#7EFFFFFF" Offset="0.5"/>
<GradientStop Color="#75000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try setting inner most Grid's Margin="0,4" and set "PART_Indicator" Margin="0,0,0,-4". Or just use the code below:
<Style x:Key="BarrelStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Value" Value="100" />
<Setter Property="Orientation" Value="Vertical" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border CornerRadius="10" BorderThickness="1" Padding="3,3,3,3" x:Name="PART_Track" Background="Blue">
<Border x:Name="PART_Indicator" CornerRadius="10" BorderBrush="#FFC06565" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Margin="0,0,0,-4">
<Grid Margin="0,4">
<Border x:Name="Indicator_Content" CornerRadius="10" Background="Red" BorderBrush="White" BorderThickness="1"/>
<Border x:Name="Indicator_Gloss" CornerRadius="10" >
<Border.Background>
<LinearGradientBrush EndPoint="1.0,0.5" StartPoint="0.05,0.5">
<GradientStop Color="#75000000" Offset="0"/>
<GradientStop Color="#7EFFFFFF" Offset="0.5"/>
<GradientStop Color="#75000000" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I'm made a style for DataGridColumnHeader. Most of it is working, but I get second Border through my header text and I don't know how to solve this. See the image below for the result I get:
I only want the one border that's below the text. This is the style I've made:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HeaderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="14" />
</Grid.ColumnDefinitions>
<Border
x:Name="BackgroundBorder"
Grid.ColumnSpan="2"
BorderBrush="{DynamicResource Dark}"
BorderThickness="0,0,1,1"/>
<ContentPresenter
Grid.Column="0"
Margin="6,3,6,3"
VerticalAlignment="Center" />
<Path
x:Name="SortArrow"
Grid.Column="1"
Width="6"
Height="4"
Margin="0,0,8,0"
VerticalAlignment="Center"
Data="M 0 4 L 3.5 0 L 7 4 Z"
Fill="{DynamicResource Dark}"
RenderTransformOrigin="0.5,0.4"
Stretch="Fill"
Visibility="Collapsed" />
<Thumb
x:Name="PART_RightHeaderGripper"
Grid.Column="1"
HorizontalAlignment="Right"
Cursor="SizeWE">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent" BorderBrush="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Can someone show me where I went wrong with the style I made?
EDIT:
I've put all the elements inside the border, but this doesn't seem to fix it.
When I give the border a different thickness, this is the result:
BorderThickness="0,2,1,4"
Both the top and bottom border appear twice.
Giving the header a MinHeight removes the double borders. This doesn't seem like a perfect fix, but works for now.
I recommend you take a careful look at how the original template works.
It's not clear what you're trying to achieve, but you need two thumbs for resizing.
On the following page
https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/datagrid-styles-and-templates
Search on columnheader then cycle through the hits until you see markup looks like:
<!--Style and template for the DataGridColumnHeader.-->
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border x:Name="columnHeaderBorder"
BorderThickness="1"
Padding="3,0,3,0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderLightColor}"
Offset="0" />
<GradientStop Color="{DynamicResource BorderDarkColor}"
Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<Thumb x:Name="PART_LeftHeaderGripper"
HorizontalAlignment="Left"
Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper"
HorizontalAlignment="Right"
Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
Notice particularly:
You need a PART_LeftHeaderGripper thumb.
Both thumbs are arranged using horizontalalignment left and right which would stop them filling the cell like yours does.
There is a width set in the style.
As a final piece of advice.
I strongly recommend you start with a working copy of a standard control template. Then carefully make small iterative changes. That way, when it breaks you know what broke it.
Here is my Code which I made by control template. I try <Border.Effect> but it does not work properly. Anybody does have any idea that how to implement drop shadow in custom made tool tip. I try to give a border in my template so that the shadow appear but still there no dropshadow.
<Style x:Key="{x:Type ToolTip}"
TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="HasDropShadow"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="grid" >
<Border x:Name="Border" Margin="0,0,0,0"
BorderThickness="0.5"
Width="{TemplateBinding Width}"
Height="19">
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="White"
Offset="0.0" />
<GradientStop Color="White"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="True" >
<Setter TargetName="Border"
Property="CornerRadius"
Value="0" />
<Setter TargetName="Border"
Property="SnapsToDevicePixels"
Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The effect of Border.Background overrides the effect of Border.Effect.You set your all GradientStop to 'white',the effect is the same as just setting the background to White in here.To see the shadow, you can set the background of the Grid to white and remove the part of Border.Background.Here is my edited Grid part:
<Grid x:Name="grid" Background="White" >
<Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="19">
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Border></Grid>
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.
In my WPF app, I see these smear-like visual corruptions, especially around rounded corners. Notice the problem with the upper corners of the button.
I tried the following but the issue persists:
SnapToDevicePixels=true
Resized and moved the app window.
Changed the screen resolution
What might be causing this?
XAML for the button:
<Button Width="Auto" Click="btnAdd_Click" Height="Auto" x:Name="btnAdd" VerticalAlignment="Center" HorizontalAlignment="Right" Focusable="False" Margin="20,0,0,0" SnapsToDevicePixels="True">
<StackPanel Orientation="Horizontal" Margin="0">
<TextBlock Text="Ekle" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,5,0"/>
<Image Source="/FideKiosk;component/Icons/right.png" MaxWidth="30" Width="15" Height="15"/>
</StackPanel>
</Button>
and then I have an implicit style in Application.Resources:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="grid">
<Rectangle RadiusX="10" RadiusY="10" x:Name="rectangle" Opacity="0.995">
<Rectangle.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="0" Color="#FFC0F3AD" Opacity="0"/>
</Rectangle.Effect>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
<GradientStop Color="#FF346223" Offset="0.124" />
<GradientStop Color="#FF325625" Offset="0.526" />
<GradientStop Color="#FF39622B" Offset="0.534" />
<GradientStop Color="#FF367021" Offset="0" />
<GradientStop Color="#FF4A8535" Offset="0.986" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" Margin="15" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="grid" Value="0.5"/>
</Trigger>
<Trigger Property="IsMouseCaptureWithin" Value="True">
<Setter Property="Effect" TargetName="rectangle">
<Setter.Value>
<DropShadowEffect BlurRadius="30" Color="#FFC0F3AD" Opacity="1" ShadowDepth="0"/>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="rectangle">
<Setter.Value>
<LinearGradientBrush EndPoint="0.501,0.039" StartPoint="0.501,0.971">
<GradientStop Color="#FF346223" Offset="0.303"/>
<GradientStop Color="#FF325625" Offset="0.526"/>
<GradientStop Color="#FF39622B" Offset="0.534"/>
<GradientStop Color="#FF4A8535" Offset="0"/>
<GradientStop Color="#FF8AC077" Offset="0.986"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I used your code and could not find any artifacts in neither the designer nor when running the app. So unless you have more UI elements that are not in code you presented my guess is that the graphics card (hardware/driver) on your machine is causing this.
You could test this by switching to software rendering: Can I force WPF rendering tier?
I am trying to create a simple button:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="0" BorderThickness="1" BorderBrush="#83a5d2" x:Name="border">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#e8f1fe" Offset="0"/>
<GradientStop Color="#cbe1fe" Offset="0.5"/>
<GradientStop Color="#a3c7f1" Offset="0.50"/>
<GradientStop Color="#cceffe" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter VerticalAlignment="Center" x:Name="contentPresenter"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But how can I change the CornerRadius? I want to be able to pass a property to the object so that the object will have that corner radius. I cannot use templatebinding because Button does not have a property called CornerRadius.
You can directly use the "Border.CornerRadius" property in your styles. For the sake of simplicity I skipped most other attributes:
<Style x:Name="myBtnStyle" TargetType="{x:Type Button}">
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Border.CornerRadius" Value="3" />
<!-- more... -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bdContent" CornerRadius="{TemplateBinding Border.CornerRadius}">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To bind the corner radius to a value you want to set programatically, you could declare it in your Xaml...
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="{Binding MyCornerRadius}" BorderThickness="1" BorderBrush="#83a5d2" x:Name="border">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#e8f1fe" Offset="0"/>
<GradientStop Color="#cbe1fe" Offset="0.5"/>
<GradientStop Color="#a3c7f1" Offset="0.50"/>
<GradientStop Color="#cceffe" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter VerticalAlignment="Center" x:Name="contentPresenter"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then create the button(s)...
<Button Style="{StaticResource ButtonStyle}" Content="Hello" DockPanel.Dock="Top" />
And then in your code behind, you could set it...
public CornerRadius MyCornerRadius { get; set; }
public MainWindow()
{
InitializeComponent();
DataContext = this;
MyCornerRadius = new CornerRadius(5, 6, 6, 5);
}
And this will give the effect you're after.