I have problems with RadPieChart. Always the radPieChart shows all series in the same color (Blue) and doesn't apply the DefaultPalette. The xaml code is the following:
<telerik:RadPieChart x:Name="chartTipoGasto" Palette="{Binding DefaultPalette}" Grid.Row="3">
<telerik:PieSeries ItemsSource="{Binding}" RadiusFactor="0.9">
<telerik:PieSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Importe"></telerik:PropertyNameDataPointBinding>
</telerik:PieSeries.ValueBinding>
<telerik:PieSeries.LabelDefinitions>
<telerik:ChartSeriesLabelDefinition Margin="-7">
<telerik:ChartSeriesLabelDefinition.Binding>
<telerik:PropertyNameDataPointBinding PropertyName="Concepto"></telerik:PropertyNameDataPointBinding>
</telerik:ChartSeriesLabelDefinition.Binding>
</telerik:ChartSeriesLabelDefinition>
</telerik:PieSeries.LabelDefinitions>
</telerik:PieSeries>
</telerik:RadPieChart>
I don't know why all series is displayed in blue and not in diferents colors like its show in demo projects that I download from Telerik website.
Thanks in advance!
Is there actually something you're binding to with the Palette="{Binding DefaultPalette}" you have declared?
You can apply your own Palette like this (You change the Gradients to Solid brushes or I think even Images if you wanted) and add as many as you want.
<chart:RadChart.PaletteBrushes>
<RadialGradientBrush>
<GradientStop Color="#FF010DBE"
Offset="0" />
<GradientStop Color="#FF0659FD"
Offset="0.5" />
<GradientStop Color="#FF0117CA"
Offset="1" />
</RadialGradientBrush>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF029912"
Offset="0" />
<GradientStop Color="#FF14FD22"
Offset="0.492" />
<GradientStop Color="#FF03930C"
Offset="1" />
</LinearGradientBrush>
<SolidColorBrush Color="#FFFCBA2A"/>
<RadialGradientBrush>
<GradientStop Color="#FFDE9A05"
Offset="0" />
<GradientStop Color="#FFF7AB05"
Offset="0.5" />
<GradientStop Color="#FFDC8E03"
Offset="1" />
</RadialGradientBrush>
</chart:RadChart.PaletteBrushes>
Related
S.O. family, got a bit of a nagging nuisance I'd like to settle, so I'm hoping there's a really simple solution to this problem.
Referencing the picture above, I've managed to create a custom layout for my program's Start button. I like the effect I have here, but it is really a nuisance to update / maintain!
The Start Button consists of an Ellipse and a Label (Label's Content is Start superimposed - both handled by same event handler).
There is a darker grey Ellipse that has been laid behind the Start Button, but laid over the controls surrounding it to Clip the edges on the curve. The Border Brush of the Gray Ellipse is a Gradient with way too many points. It works, it's kludgy as all get-out, and I hate maintaining it, but I'm fairly new with WPF so I'm testing my limits here. . . The XAML for this gradient is below (you'll soon see why and perhaps be nauseated at it too). Surely there is a simpler method of doing this very thing, right? The Controls surrounding are currently Labels, and I know Borders have the ability to round corners, but can they do complex, concave curves? Should these be Polygons with a Label affixed for Text? (Can Polygons support Text?)
XAML:
<Ellipse x:Name="StartBtn_BG" Grid.Column="0" Grid.Row="0" StrokeThickness="2" HorizontalAlignment="Center" Width="203" Cursor="Arrow" Fill="#FFC8C8C8" >
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FCC8C8C8" Offset="1"/>
<GradientStop Color="#FCC8C8C8" Offset=".9821"/>
<GradientStop Color="DarkBlue" Offset="0.9820"/>
<GradientStop Color="DarkBlue" Offset="0.8628"/>
<GradientStop Color="#FCC8C8C8" Offset="0.8627"/>
<GradientStop Color="#FCC8C8C8" Offset="0.8379"/>
<GradientStop Color="DarkBlue" Offset="0.8378"/>
<GradientStop Color="DarkBlue" Offset="0.7211"/>
<GradientStop Color="#FCC8C8C8" Offset="0.7210"/>
<GradientStop Color="#FCC8C8C8" Offset="0.6978"/>
<GradientStop Color="DarkBlue" Offset="0.6977"/>
<GradientStop Color="DarkBlue" Offset="0.5811"/>
<GradientStop Color="#FCC8C8C8" Offset="0.5810"/>
<GradientStop Color="#FCC8C8C8" Offset="0.5581"/>
<GradientStop Color="DarkBlue" Offset="0.5580"/>
<GradientStop Color="DarkBlue" Offset="0.4420"/>
<GradientStop Color="#FCC8C8C8" Offset="0.4419"/>
<GradientStop Color="#FCC8C8C8" Offset="0.4186"/>
<GradientStop Color="DarkBlue" Offset="0.4185"/>
<GradientStop Color="DarkBlue" Offset="0.3022"/>
<GradientStop Color="#FCC8C8C8" Offset="0.3021"/>
<GradientStop Color="#FCC8C8C8" Offset="0.2791"/>
<GradientStop Color="DarkBlue" Offset="0.2790"/>
<GradientStop Color="DarkBlue" Offset="0.1622"/>
<GradientStop Color="#FCC8C8C8" Offset="0.1621"/>
<GradientStop Color="#FCC8C8C8" Offset="0.1400"/>
<GradientStop Color="DarkBlue" Offset="0.1399"/>
<GradientStop Color="DarkBlue" Offset="0.0211"/>
<GradientStop Color="#FCC8C8C8" Offset="0.0210"/>
<GradientStop Color="#FCC8C8C8" Offset="0"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
Linear Gradient in UWP XAML works fine but I need to convert it to Radial Gradient brush.
Here is my current UWP XAML code
<Page
x:Class="button_radious.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:button_radious"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.Background>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#000000" Offset="0.30"/>
<GradientStop Color="green" Offset="0.65"/>
<GradientStop Color="White" Offset="0.90"/>
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Page>
RadialGradientBrush is not included by default as UWP API. You will need to add reference to the Windows Community Toolkit UI - Microsoft.Toolkit.Uwp.UI which contains RadialGradientBrush which you can use as expected, the same way as in WPF.
<Grid>
<Grid.Background>
<media:RadialGradientBrush
AlphaMode="Premultiplied"
RadiusX="0.2" RadiusY="0.2"
SpreadMethod="Reflect">
<GradientStop Color="Red" Offset="0" />
<GradientStop Color="Transparent" Offset="0.25" />
<GradientStop Color="Yellow" Offset="0.50" />
<GradientStop Color="Transparent" Offset="0.75" />
<GradientStop Color="Green" Offset="1.0" />
</media:RadialGradientBrush>
</Grid.Fill>
</Grid>
Because the brush resides in the library, you will have to add the following namespace declaration to your Page element:
xmlns:media="Microsoft.Toolkit.Uwp.UI.Media"
I want to animate a GradientBrush (LinearGradientBrush in my case) used by a control's fill property. I tried to change the gradient stops values (offset or color) in my storyboard but it doesn't seem to work. I target a grid's background for the example:
<Grid x:Name="LogoGrid" Height="512" Width="512">
<Grid.Background>
<LinearGradientBrush x:Name="LogoBackgroundBrush" StartPoint="0 0" EndPoint="1 1">
<GradientStop x:Name="Stop0" Color="Transparent" Offset="0" />
<GradientStop x:Name="Stop1" Color="#80FFFFFF" Offset="0.5" />
<GradientStop x:Name="Stop2" Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
And the storyboard:
<Storyboard x:Key="LoadingStoryBoard">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="LogoGrid"
Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
RepeatBehavior="Forever" EnableDependentAnimation="True">
<LinearColorKeyFrame Value="#40000000" KeyTime="0:0:1" />
<LinearColorKeyFrame Value="#A0FFFFFF" KeyTime="0:0:2" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
Did you make sure to set EnableDependentAnimation to true?
You can look at my answer to another similar question for a complete example.
You didn't mention how you start the storyboard. Anyway, I made it work by replacing x:Key with x:Name (otherwise I can't reference the storyboard from code).
XAML
<Grid x:Name="LogoGrid">
<Grid.Resources>
<Storyboard x:Name="LoadingStoryBoard">
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="LogoGrid"
Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
RepeatBehavior="Forever"
EnableDependentAnimation="True">
<LinearColorKeyFrame Value="#40000000" KeyTime="0:0:1" />
<LinearColorKeyFrame Value="#A0FFFFFF" KeyTime="0:0:2" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.Background>
<LinearGradientBrush x:Name="LogoBackgroundBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop x:Name="Stop0" Color="Transparent" Offset="0" />
<GradientStop x:Name="Stop1" Color="#80FFFFFF" Offset="0.5" />
<GradientStop x:Name="Stop2" Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
Code-behind
public sealed partial class MainPage
{
public MainPage()
{
InitializeComponent();
Loaded += (sender, args) => LoadingStoryBoard.Begin();
}
}
Here is a complete demo project on GitHub.
Edit
Tangetial: This shows how to access the storyboard through x:Key instead of my x:Name. The trick is to access the storyboard through Resources, e.g.:
((Storyboard)Resources["LoadingStoryboard"]).Begin();
I am trying to create a rectangle with a gradient that reflects outside. I want something similar to this (but for a rectangle/grid). I was not able to achieve it using a LinearGradientBrush. Below is what I tried. But that is not at all what I want.
<Border Grid.Row="1" Grid.ColumnSpan="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Border.Background>
Thank you.
It's doable, but tricky. You'll need to do it in Blend because there's a gradient tool that lets you easily rotate a gradient and adjust the gradient stops. You'll need a parent grid with two child grids of equal size. One child will need the gradient to be horizontal, and the other vertical. You will have to adjust the opacity on both grids so the gradient appears to be one. I threw this XAML together in a few minutes, so it's not perfect, but it might help you out....
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Height="200">
<Grid.Background>
<LinearGradientBrush EndPoint="0.51,1.024"
StartPoint="0.507,0.052">
<GradientStop Color="White"
Offset="1" />
<GradientStop Color="#FFF7F7F7"
Offset="0.098" />
<GradientStop Color="Black"
Offset="0.5" />
<GradientStop Color="#FFC3C3C3"
Offset="0.211" />
<GradientStop Color="White"
Offset="0.829" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<Grid Height="200"
Margin="0,220">
<Grid.Background>
<LinearGradientBrush EndPoint="1.001,0.588"
StartPoint="-0.001,0.596">
<GradientStop Color="White"
Offset="1" />
<GradientStop Color="#FFF7F7F7" />
<GradientStop Color="#7F000000"
Offset="0.498" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
</Grid>
I can set the background of each TabItem with TabItem.Background, but when that tab is selected it is plain vanilla white.
How do I set the style of the tab header that is focused?
<TabControl DockPanel.Dock="Top">
<TabControl.Background>
<LinearGradientBrush EndPoint="1.115,1.13" StartPoint="0,-0.02">
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#FFE0E376" Offset="0"/>
</LinearGradientBrush>
</TabControl.Background>
<TabItem Header="Allgem." Cursor="Hand">
<TabItem.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFF11818" Offset="1"/>
</LinearGradientBrush>
</TabItem.Background>
<StackPanel DockPanel.Dock="Bottom" Width="400" HorizontalAlignment="Left" Margin="10">
...
You can use a trigger to change the style only for the selected tab:
<TabControl DockPanel.Dock="Top">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFF11818" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TabControl.Resources>
<TabControl.Background>
<LinearGradientBrush EndPoint="1.115,1.13" StartPoint="0,-0.02">
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#FFE0E376" Offset="0"/>
</LinearGradientBrush>
</TabControl.Background>
<TabItem Header="Allgem." Cursor="Hand">
<StackPanel DockPanel.Dock="Bottom" Width="400"
HorizontalAlignment="Left" Margin="10">
...
</StackPanel>
</TabItem>
</TabControl>
This will set the background of the selected tab to the red gradient used in your sample code.