I'm trying to implement custom "progressbar" which is based on image that is not rectangle. I through I could use opacitymask to achieve this, but I haven't yet figured out how to do it. I have an image which has transparent background and it's colored on white from inside. Initial state is that image is completely blue, and end state is that image is completely white (except borders will remain black)
Currently I have this kind of XAML code for this, but I dont see any blue filling over image...
<Style TargetType="ProgressBar" x:Name="ImageProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="{TemplateBinding Margin}"
Background="{TemplateBinding Background}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Grid>
<Image Source="Assets/emptyprogress.png" Stretch="Fill" />
<Rectangle Fill="Blue">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="Assets/emptyprogress.png" Stretch="Fill" />
</Rectangle.OpacityMask>
<Rectangle.Clip>
<RectangleGeometry x:Name="CLIPRECTANGLE" />
</Rectangle.Clip>
</Rectangle>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ProgressBar Grid.Row="3" Style="{StaticResource ImageProgressBar}"
Width="200"
Height="200"
Minimum="0"
Maximum="100"
Value="50" />
This is what I have and this should be end point
This is what I want
Your fill rectangle needs to be named ProgressBarIndicator for the ProgressBar to be able to find and fill it.
You might also consider replacing your tooth image with a PathGeometry. You can then use the same geometry to Clip the rectangle.
Here's an example with Ellipses and inappropriately hard-coded values (I'll leave a more complicated path for an artist :) )
<Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">
<Ellipse Height="50" x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" />
<Rectangle Height="50" x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" >
<Rectangle.Clip>
<EllipseGeometry Center="200,25" RadiusY="25" RadiusX="200" />
</Rectangle.Clip>
</Rectangle>
</Grid>
Related
Default NumericUpDown looks like that:
,
and because of buttons take a lot of place I want to make it more Windows form style, like this:
.
I've tried to play with ButtonSpinner Styles, but didn't work out, it shrinks the whole NumericUpDown, not only ButtonSpinner (even if I write another style for NumericUpDown).
<Style Selector="ButtonSpinner">
<Setter Property="Height">
<Setter.Value>
10
</Setter.Value>
</Setter>
<Setter Property="Width">
<Setter.Value>
25
</Setter.Value>
</Setter>
</Style>
What I should do to achieve desired result?
There are two solutions:
You could modify the ButtonSpinner template (or NumericUpDown /template/ ButtonSpinner template) to use the UniformGrid with 2 rows instead of StackPanel with horizontal orientation used by the Fluent theme. However you may encounter some problems with missing static resources, so you have to remember to include them in your file.
You could use the Simple theme instead of Fluent one. It uses a template with UniformGrid with 2 rows by default, but it would change the look of all controls.
So, #radoslawik proposed a good solution, but there was one problem -- he linked to nightly build of Avalonia and you may use another version. If you are you must find source code of your version (they are tagged in github) and look up styles there. For my version (0.10.18 -- it's last non-preview available at the moment) solution is next:
<Window.Styles>
<Style Selector="NumericUpDown /template/ ButtonSpinner">
<Setter Property="Template">
<ControlTemplate>
<DataValidationErrors>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
MinHeight="{TemplateBinding MinHeight}">
<DockPanel>
<UniformGrid Rows="2" Name="PART_SpinnerPanel"
DockPanel.Dock="Right"
IsVisible="{TemplateBinding ShowButtonSpinner}">
<RepeatButton Name="PART_IncreaseButton"
Classes="ButtonSpinnerRepeatButton"
VerticalContentAlignment="Center"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
FontSize="{TemplateBinding FontSize}">
<Path Fill="{TemplateBinding Foreground}"
Width="16"
Height="8"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ButtonSpinnerIncreaseButtonIcon}" />
</RepeatButton>
<RepeatButton Name="PART_DecreaseButton"
Classes="ButtonSpinnerRepeatButton"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
VerticalContentAlignment="Center"
FontSize="{TemplateBinding FontSize}">
<Path Fill="{TemplateBinding Foreground}"
Width="16"
Height="8"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ButtonSpinnerDecreaseButtonIcon}" />
</RepeatButton>
</UniformGrid>
<ContentPresenter Name="PART_ContentPresenter"
Grid.Column="1"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Padding="{TemplateBinding Padding}" />
</DockPanel>
</Border>
</DataValidationErrors>
</ControlTemplate>
</Setter>
</Style>
</Window.Styles>
I am using UWP Community Toolkit to create blur as following:
<Grid x:Name="gridContent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="BlurBehavior"
Value="0"
Duration="0"
Delay="0"
AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>
</Grid>
And this works just fine for the whole grid.
But, my problem is now that there is a listview in this grid, and I want to make custom header in that listview that will be semi transparent, and I want just content under that header to be blurred. So the content under that header will be dynamically changed.
Does anyone know how to achieve this?
Use Blur in a separate grid inside your content grid
Here is a code sample
<Grid Name="MainGrid">
<ListView>
....
</ListView>
<Grid VerticalAlignment="Top" HorizontalAlignment="Stretch">
<interactivity:Interaction.Behaviors>
<behaviors:Blur Value="25" Duration="0" Delay="0" AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>
<!-- If you want color shade -->
<Grid.Background>
<SolidColorBrush Color="Red" Opacity="0.5"/>
</Grid.Background>
</Grid>
</Grid>
For more info refer UWP Hamburger Menu with Frosted glass effect
By default, the Header of the ListView is scrollable along with the content. A more elegant solution would be to extract the header template to be outside of the ScrollViewer and blur it. Note you will need to give the content a padding to give space to the header initially, and the top padding value should be equal to the height of the header.
You can do everything within a style -
<Application.Resources>
<x:Double x:Key="ListViewHeaderHeight">200</x:Double>
<Thickness x:Key="ListViewContentMargin" Top="{StaticResource ListViewHeaderHeight}"></Thickness>
<Style x:Key="BlurredHeaderListViewStyle" TargetType="ListView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter Margin="{StaticResource ListViewContentMargin}" FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTransitions="{TemplateBinding HeaderTransitions}" Padding="{TemplateBinding Padding}"/>
</ScrollViewer>
<ContentPresenter x:Name="HeaderPresenter" Background="Transparent" Height="{StaticResource ListViewHeaderHeight}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" VerticalAlignment="Top">
<interactivity:Interaction.Behaviors>
<behaviors:Blur x:Name="BlurBehavior" Value="12" />
</interactivity:Interaction.Behaviors>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Now you just apply the style to any ListView you want -
<ListView Style="{StaticResource BlurredHeaderListViewStyle}">
<ListView.HeaderTemplate>
<DataTemplate>
<sampleapp:CustomHeader />
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Result
I'm trying to make a simple progress bar with rounded corners.
This is my xaml:
<Grid>
<ProgressBar Minimum="0" Maximum="100" Height="50" Value="50" Name="pbStatus" BorderBrush="Black" BorderThickness="3" Foreground="#336699" />
<TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
I'm trying to look for the Border-Radius property.... but i just find it.
Any help please?
Thanks.
From Visual Studio Designer Right Click on the ProgressBar > Edit Template > Edit a Copy,
In the Generated Style add CornerRadius to the Border and set the RadiusX and RadiusY in the filling Rectangles :
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="30"/>
<Rectangle x:Name="PART_Track" />
<Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
<Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" RadiusX="30" RadiusY="30"/>
<Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5" RadiusX="30" RadiusY="30">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
Put a border inside and set the corner radius property of the border instead. Here is the link describing this
progressbar bar style right radius
I have a picture, I want to use it in WPF as a progressbar.
Please look at the image to understand this.
The code below, repeated the image.
The moving progress-box above the progressbar.
I have tried this
<ControlTemplate
x:Key="ImageProgressBarTemplate"
TargetType="ProgressBar">
<ControlTemplate.Triggers>
<EventTrigger
RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard
x:Name="str">
<RectAnimation
x:Name="quatanim"
Storyboard.TargetName="imgbrush"
Storyboard.TargetProperty="(ImageBrush.Viewport)"
From="0,0,36,36"
To="36,0,36,36"
Duration="0:0:5"
AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<!-- Custom progress bar goes here -->
<Border
Name="PART_Track"
Width="{TemplateBinding Width}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Height="{TemplateBinding Height}"
CornerRadius="0"
Padding="1.5">
<Grid>
<!-- Rounded mask (stretches to fill Grid) -->
<Border
Name="mask"
Background="#EEEEEE"
CornerRadius="0" />
<!-- Any content -->
<Rectangle
Name="PART_Indicator"
HorizontalAlignment="Left"
Height="{TemplateBinding Height}">
<Rectangle.OpacityMask>
<VisualBrush
Visual="{Binding ElementName=mask}" />
</Rectangle.OpacityMask>
<Rectangle.Fill>
<ImageBrush
x:Name="imgbrush"
ImageSource="/myproject;component/Assets/myimage.png"
AlignmentX="Left"
Stretch="Fill"
TileMode="Tile"
AlignmentY="Top"
ViewportUnits="Absolute"
Viewport="0,0,36,36"
ViewboxUnits="RelativeToBoundingBox"
Viewbox="0,0,1,1">
</ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
</Border>
<ProgressBar Template="{StaticResource ImageProgressBarTemplate}"/>
The all that I need is a detailed tutorial of how to use image in wpf progressbar for this kind of images.
You have to design your own template of progressbar.
<ControlTemplate TargetType="ProgressBar">
<Canvas>
<ProgressBar x:Name="pgbar" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
Value="{TemplateBinding Value}"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"/>
<Image Source="image.PNG" Canvas.Left="{TemplateBinding Value}">
<Image.RenderTransform>
<!-- width / 2 and height /2-->
<TranslateTransform X="-56" Y="-25"/>
</Image.RenderTransform>
</Image>
</Canvas>
</ControlTemplate>
An improvement for the answer of Klaus Fischer:
Here is the ProgressBar:
<ProgressBar Value="{Binding ProgressbarValue}" Template="{StaticResource Progressbar2}" />
And here is the template (See post of Klaus Fischer):
<ControlTemplate x:Key="Progressbar2" TargetType="ProgressBar">
<Canvas >
<ProgressBar x:Name="pgbar" Visibility="Hidden" Width="{Binding ElementName=StatusGrid,Path=ActualWidth}" Background="Transparent" Value="{TemplateBinding Value}" />
<Image Source="Resources/Images/running.png" Height="42px" Canvas.Left="{TemplateBinding Value, Converter={StaticResource WidthConverter}, ConverterParameter={x:Reference pgbar}}" />
</Canvas>
</ControlTemplate>
As you can see, there is a converter in the
Canvas.Left
property.
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var bar = ((System.Windows.Controls.ProgressBar) parameter);
var percentPixe = bar.ActualWidth/100;
return percentPixe*(double) value-42;
}
The expression
value-42
handles the size of the image, otherwise the image would be in front of the real ProgressBar.
This should do the job.
How do I create a circle shape button but with the color affected by binding.
I have already something like this:
<Button Command="{Binding ShowDetails}" Background="{Binding Color} />
and the color that will be received will be of this format, for example: Colors.LightGray
Can anyone help me?
If you google for "circular button template silverlight" you will find lots of blog posts that describe this process. Including previous StackOverflow questions:
Silverlight: Creating a round button template
The basic steps are
Create a new ControlTemplate for your buttons that renders a circle, using an Ellipse for example.
If you want your Buttton.Background to set the Fill color, then use a TemplateBinding for the Ellipse.Fill property.
For example:
<Button Content="MyButton">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
You will have to write the control template for the button like this
<Button Content="MyButton">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
With the color binding :
<UserControl.Resources>
<Color x:Key="MyColor">LightGray</Color>
<Style x:Key="RoundButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Width="40" Height="40" Stroke="#FF000000" StrokeThickness="1" Canvas.Left="141" Canvas.Top="61">
<Ellipse.Fill>
<SolidColorBrush Color="{StaticResource MyColor}" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Button Style="{StaticResource RoundButton}" />
</Grid>
Enjoy ;)