I use Telerik component for serial port plot data on chart, I need to know how can i have more space between X-Axis item now x-axis show compressed and i need to know if the plot point increase how can add chart auto scroll,this is my XAML code :
<telerik:RadCartesianChart x:Name="myChart" ScrollViewer.HorizontalScrollBarVisibility="Auto">
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid/>
</telerik:RadCartesianChart.Grid>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis IsStepRecalculationOnZoomEnabled="True" LabelOffset="0" LastLabelVisibility="Visible" LineThickness="1" MajorTickOffset="0" MajorTickLength="5" MajorTickInterval="1" PlotMode="BetweenTicks" SmartLabelsMode="None" TickThickness="1" ZIndex="0"/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis BorderThickness="0,4,0,0">
<telerik:LinearAxis.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF0E0EF5" Offset="1"/>
</LinearGradientBrush>
</telerik:LinearAxis.BorderBrush>
<telerik:LinearAxis.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFE41F1F" Offset="1"/>
</LinearGradientBrush>
</telerik:LinearAxis.Background>
</telerik:LinearAxis>
</telerik:RadCartesianChart.VerticalAxis>
</telerik:RadCartesianChart>
I was push my project to Github
I found my answer, Add those tag to radCartesianChart root element
ScrollViewer.HorizontalScrollBarVisibility="Auto"
HorizontalZoomRangeStart="0.9"
HorizontalZoomRangeEnd="1"
Complete format :
<telerik:RadCartesianChart
x:Name="myChart"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
HorizontalZoomRangeStart="0.9"
HorizontalZoomRangeEnd="1"
Margin="0,0,445,162">
Related
I have a RadialGradientBrush Tag applied to a Path.Stroke and the Path.Data is a Circle
<RadialGradientBrush>
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
<GradientStop Color="Green" Offset="2"/>
</RadialGradientBrush>
But both Visual Studio designer and Application only show 2 RadientStop. I guess the gradient is too small but I change the Property RadiusX and RadiusY to a small number but I still don't get the result.
I have a problem where I have to bind to Tag property. But don't know what will come here.
<Border x:Name="BorderStatus" CornerRadius="2" Tag="Transparent">
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="{Binding Tag, ????}" Offset="0"/>
<GradientStop Color="{Binding Tag, ????}" Offset="0.47"/>
<GradientStop Color="Red" Offset="0.77"/>
<GradientStop Color="DarkRed" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
This is done cause there are triggers which will change the tag property.
We can bind with ElementName but is there any other way?
Two ways of accomplishing your goal I can think of are these:
I. Use Binding.ElementName property:
Color="{Binding Tag, ElementName=BorderStatus}"
II. Use RelativeSource in FindAncestor mode:
Color="{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType=Border}}"
Is there a way to execute attached behavior last, after initialization of list properties in following example
<LinearGradientBrush local:FreezeBehavior.IsFrozen="True">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
It can be done like this
<GradientStopCollection x:Key="SomeKey">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</GradientStopCollection>
<LinearGradientBrush GradientStops="{StaticResource SomeKey}" local:FreezeBehavior.IsFrozen="True"/>
But it will require to create dozens of unnecessary ResourceDictionary entries.
P.S.: related question (in case someone see this as duplicate, then vote close it instead of this one, here I already know the problem and it's more clearly described).
I guess execution flow is based on XAML Parser, and in parse properties as they appear. So you can try to reorder declarations of properties. Something like this:
<LinearGradientBrush>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
<local:FreezeBehavior.IsFrozen>True</local:FreezeBehavior.IsFrozen>
</LinearGradientBrush>
May be you'll have to use <sys:Bool>True</sys:Bool> as value of FreezeBehavior.IsFrozen
In my WP8 application I want to make a color inversion effect. I have no idea what tools I should use so I'll just explain what I want in a very general terms.
How it is supposed to work: say I have a UserControl that consists of black rectangle and some white text on top of it. I want to apply something to that user control that will invert colors of a part of UserControl that it covers. Some invisible rectangle that spans say 50% of UserControl and in that area background will be white and text will be black. I want it to be dynamic so I can change the area it covers at runtime.
Here's an image to illustrate this:
Inversion effect applied to a half of control.
I believe it's possible to achieve this by using two controls with same text, inverted colors and opacity mask but I wonder if this can be done in a more clean and direct way?
I think what you're looking for ideally would either be two TextBlocks with OpacityMask applied to the one on top like;
<Grid MaxWidth="100">
<TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Red"
TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Text="Hey check it out we can change object gradients! yay!" Foreground="Blue"
TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.OpacityMask>
<LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.322" Color="Black"/>
<GradientStop Offset="0.739" Color="Transparent"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.OpacityMask>
</TextBlock>
</Grid>
Or you could just apply a LinearGradientBrush directly to the Foreground (or Background of other element) itself like;
<Border Width="100" Height="50">
<Border.Background>
<LinearGradientBrush StartPoint="0.062,0.552" EndPoint="0.835,0.548">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="White"/>
<GradientStop Offset="0.5" Color="Black"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.1,0.1" EndPoint="0.75,0.75">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="Black"/>
<GradientStop Offset="0.5" Color="White"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Border>
or gettin 80's style fancy;
<Border Width="100" Height="50">
<Border.Background>
<LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.541" Color="White"/>
<GradientStop Offset="0.548" Color="Black"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Hello World!" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<LinearGradientBrush StartPoint="0.472,0.047" EndPoint="0.47,0.942">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.631" Color="Black"/>
<GradientStop Offset="0.635" Color="White"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Border>
Give that a shot, hope this helps.
I have a brush that colors the background of a header. I like the way the brush looks but would like it to fade to transparent in the bottom third. Any ideas how to do this?
<LinearGradientBrush
x:Key="HeaderBackgroundBrush"
EndPoint=".5,1"
StartPoint="1,0">
<GradientStop Color="#006699" Offset="1"/>
<GradientStop Color="#80A8CC" Offset="0.5"/>
</LinearGradientBrush>
I'm not sure you can do it by working only at the brush level, however you could apply an OpacityMask to your control:
<LinearGradientBrush
x:Key="HeaderBackgroundOpacityMask"
StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.667"/>
<GradientStop Color="#00FFFFFF" Offset="1"/>
</LinearGradientBrush>
...
<Border Background="{StaticResource HeaderBackgroundBrush}"
OpacityMask="{StaticResource HeaderBackgroundOpacityMask}">
just specify the colors as ARGB (including alpha) like this: #AARRGGBB. Then give your last gradient stop an alpha value of 0 (fully transparent; in your case #0080A8CC). HTH.
If you want to do it in C# use the following code. This will give you a light pink/salmon to fully transparent brush. Change the #FF and #00 to get a different transparency gradient.
var startColour = (SolidColorBrush)new BrushConverter().ConvertFrom("#FFff99a8");
var endColour = (SolidColorBrush)new BrushConverter().ConvertFrom("#00ff99a8");
_dirtyColourBackground = new LinearGradientBrush(startColour.Color, endColour.Color,new Point(0,0),new Point(1,0));