Hello,
is there a way to dynamically set the width of a columnSeries Marker to the width of the underlying column? I need this to visually highlight the end of the columns.
Unfortunately the thickness-property isn't of Thickness-Type so i could get a work-around by setting this to e.g "0,5,0,0".
I also already tried overlying or replacing with a stackedcolumn-series and setting the top-fragment to a fixed value, but this looks ugly in case of the range of the chart changes - then the fixed hight top-fragment also scales in its height and I need this fixed.
GreetsJoachim
Hello Joachim,
Thank you for your post. I have been looking into the appearance that you have described and I can suggest using the Thickness of the ColumnSeries. After setting the Thickness, you can create a style for the Rectangle and add a Setter for the OpacityMask. Using the OpacityMask, you can hide the side lines of the stroke of the rectangle and by doing so, only the top line will appear. I have created a sample application for you, that shows how you can implement this approach.
Please let me know if you need any further assistance on the matter.
Sincerely,
Krasimir
Developer Support Engineer
Infragistics
www.infragistics.com/support
Hello Krasimir,
awesome - this works exactly the way I need.Thanks for the great support and the sample application!
SincerelyJoachim
thank you for the solution and the attached example, this seems to work as I expected! Great!There is just one last thing: I'm using an MVVM Model and so I tried to port the example to an almost pure XAML solution - but this doesn't seem to work.
Maybe you can help me to realize the solution via XAML?
<Style TargetType="Rectangle" >
<Setter.Value>
<MultiBinding Converter="{StaticResource WidthHeightToVisualBrushConverter}" ConverterParameter="10">
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/><Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/><Binding Path="Fill" RelativeSource="{RelativeSource Self}" /><Binding Path="StrokeThickness" RelativeSource="{RelativeSource Self}"/><Binding Path="Outline" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ig:ColumnSeries}, AncestorLevel=1}" />
</MultiBinding>
</Setter.Value>
</Style>
sorry, the above sample was not complete. this is the full modification:
<ig:ColumnSeries.Resources>
<local:WidthHeightToVisualBrushConverter x:Key="WidthHeightToVisualBrushConverter"/>
<Setter Property="Stroke">
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
<Binding Path="Fill" RelativeSource="{RelativeSource Self}" />
<Binding Path="StrokeThickness" RelativeSource="{RelativeSource Self}"/>
<Binding Path="Outline" RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ig:ColumnSeries}, AncestorLevel=1}" />
</Setter>
</ig:ColumnSeries.Resources>
Thank you for your replies. I have been looking into them and I can suggest the approach I have suggested, using the Loaded event of the Rectangle. The style that you are using for the Rectangle, does not apply the brush for the stroke, since the Stroke of the Rectangles of the ColumnSeries is determined by the Outline property of the ColumnSeries and it seems that binding between the Outline property of the ColumnSeries and the Stroke property of the Rectangles is done in code, the Setter of the Style that you are creating is not applied, since setting the Outline as color for the Stroke is overriding it. When you handle the loaded event of the Rectangles and create the binding for the Stroke, in the event handler, it overrides the stroke created from the ColumnSeries and the brush is applied.
I am just checking if you require any further assistance on the matter.
Finally I found a solution today as is reviewed the old code. I'm now using a VisualBrush on the Fill (brush) of a separate ColumnSeries I'm putting on top of the existing colum-series using a fresh ColumnYAxis and ColumnXAxis which maximum and minimum values are aligned to the masters boundary values (min, max). This solution is perfoming much better than the others and is also pretty straight forward.
Finally thank you for your support and kind regards,
Joachim
THE CODE EXAMPLE
Y-Axis Definition
<ig:NumericYAxis x:Name="ColumnYAxis2" MinimumValue="{Binding ActualMinimumValue, ElementName=ColumnYAxis1}" MaximumValue="{Binding ActualMaximumValue, ElementName=ColumnYAxis1}"></ig:NumericYAxis>
ColumnSeries
<ig:ColumnSeries ItemsSource="{Binding MyData}" ValueMemberPath="BoundaryValue" XAxis="{Binding ElementName=ColumnXAxis2}" YAxis="{Binding ElementName=ColumnYAxis2}" BorderThickness="0" BorderBrush="Transparent" RadiusX="0" RadiusY="0" OverridesDefaultStyle="True" Thickness="0">
<ig:ColumnSeries.Brush>
<VisualBrush AlignmentY="Top" ViewboxUnits="Absolute" ViewportUnits="Absolute" Viewbox="0,0,10,5" Viewport="0,0,10,500" TileMode="Tile" Stretch="None">
<VisualBrush.Visual>
<Border Height="2" Width="10" Background="White"/>
</VisualBrush.Visual>
</VisualBrush>
</ig:ColumnSeries.Brush>
</ig:ColumnSeries>