Hi,
I am trying to implement the workaround stated in the help for creating an XamBulletGraph with multiple comparative markers by: The effect of displaying multiple performance bars or multiple comparative markers can be achieved by overlaying several instances of the control.
The reason I am doing this is so that I can show values for both the TargetValue as well as a StandardDeviation TargetValue. Ideally I want to only to display the TargetValue for the second XamBulletGraph and nothing else. I tried setting everything but the TargetValue to Transparent, but something must not be quite right in my xaml because if I try to add my second bullet graph on top of the original one it covers it but shows the Standard Deviation marker. If I reverse them then I cannot see my Standard Deviation marker.
Are there any existing samples available for this particular workaround?
Thanks,
Amanda
Here is the xaml:
VerticalAlignment="Center" MinimumValue="{Binding MinValue}" MaximumValue="{Binding MaxValue}" Interval="{Binding Interval}" MinorTickCount="{Binding MinorTickCount}" TickBrush="#F79646" TickStrokeThickness="3" TargetValue="{Binding TargetValue}" TargetValueBreadth="12" TargetValueName="{Binding TargetValueName}" TargetValueBrush="White" TargetValueOutline="Black" TargetValueStrokeThickness=".5" Value="{Binding Value}" ValueName="{Binding ValueName}" ValueBrush="White" ValueOutline="Black" ValueStrokeThickness=".5" LabelFormat="{}{0}" Title="{Binding Title}" TitleStyle="{DynamicResource titleStyle}" TitlesHorizontalRatio=".2" ShowToolTip="True" FontWeight="Bold"> Background="Transparent" VerticalAlignment="Center" MinimumValue="{Binding MinValue}" MaximumValue="{Binding MaxValue}" Interval="{Binding Interval}" MinorTickCount="{Binding MinorTickCount}" TickBrush="Transparent" TickStrokeThickness="3" TargetValue="{Binding StandardDeviation}" TargetValueBreadth="10" TargetValueName="{Binding StandardDeviationValueName}" TargetValueBrush="DimGray" TargetValueOutline="Black" TargetValueStrokeThickness=".5" Value="{Binding Value}" ValueName="{Binding ValueName}" ValueBrush="Transparent" ValueOutline="Transparent" ValueStrokeThickness=".5" LabelFormat="{}{0}" Title="{Binding Title}" TitleStyle="{DynamicResource titleStyle}" TitlesHorizontalRatio=".2" ShowToolTip="True" FontWeight="Bold">
Just realized my xaml was missing some pieces after I hit post. Here it is again:
<DataTemplate x:Key="graphObjectItemTemplate"> <Grid> <igGauge:XamBulletGraph Height="80" Background="Transparent" VerticalAlignment="Center" MinimumValue="{Binding MinValue}" MaximumValue="{Binding MaxValue}" Interval="{Binding Interval}" MinorTickCount="{Binding MinorTickCount}" TickBrush="Transparent" TickStrokeThickness="3" TargetValue="{Binding StandardDeviation}" TargetValueBreadth="10" TargetValueName="{Binding StandardDeviationValueName}" TargetValueBrush="DimGray" TargetValueOutline="Black" TargetValueStrokeThickness=".5" Value="{Binding Value}" ValueName="{Binding ValueName}" ValueBrush="Transparent" ValueOutline="Transparent" ValueStrokeThickness=".5" LabelFormat="{}{0}" Title="{Binding Title}" TitleStyle="{DynamicResource titleStyle}" TitlesHorizontalRatio=".2" ShowToolTip="True" FontWeight="Bold"> <igGauge:XamBulletGraph.Ranges> <ig:XamLinearGraphRange StartValue="{Binding LowRangeMinValue}" EndValue="{Binding LowRangeMaxValue}" Brush="Transparent" Caption="{Binding LowRangeCaption}"/> <ig:XamLinearGraphRange StartValue="{Binding HighRangeMinValue}" EndValue="{Binding HighRangeMaxValue}" Brush="Transparent" Caption="{Binding HighRangeCaption}"/> </igGauge:XamBulletGraph.Ranges> </igGauge:XamBulletGraph> <igGauge:XamBulletGraph Height="80" VerticalAlignment="Center" MinimumValue="{Binding MinValue}" MaximumValue="{Binding MaxValue}" Interval="{Binding Interval}" MinorTickCount="{Binding MinorTickCount}" TickBrush="#F79646" TickStrokeThickness="3" TargetValue="{Binding TargetValue}" TargetValueBreadth="12" TargetValueName="{Binding TargetValueName}" TargetValueBrush="White" TargetValueOutline="Black" TargetValueStrokeThickness=".5" Value="{Binding Value}" ValueName="{Binding ValueName}" ValueBrush="White" ValueOutline="Black" ValueStrokeThickness=".5" LabelFormat="{}{0}" Title="{Binding Title}" TitleStyle="{DynamicResource titleStyle}" TitlesHorizontalRatio=".2" ShowToolTip="True" FontWeight="Bold"> <igGauge:XamBulletGraph.Ranges> <ig:XamLinearGraphRange StartValue="{Binding LowRangeMinValue}" EndValue="{Binding LowRangeMaxValue}" Brush="#FFDA30" Caption="{Binding LowRangeCaption}"/> <ig:XamLinearGraphRange StartValue="{Binding HighRangeMinValue}" EndValue="{Binding HighRangeMaxValue}" Brush="#F66656" Caption="{Binding HighRangeCaption}"/> </igGauge:XamBulletGraph.Ranges> </igGauge:XamBulletGraph> </Grid> </DataTemplate>
Hello Amanda,
Since WPF will draw items on top of each based on the way they are defined in the XAML, you should put the bullet graph with the transparent linear ranges on top of the bullet graph displaying the linear ranges. Please see attached sample.
Let me know if you have any questions.
Sincerely,
Valerie
Software Developer
Infragistics
www.infragistics.com/support
Thank you for the sample, however it does not seem to work even when I drop the exact code you posted into my xaml.
Do you think the fact that my application, these xamBulletGraphs exist in a data template rather that just sitting in a window? Were you able to make this work where they are in a data template?
//Amanda
I tested this using a BulletGraph inside the DataTemplate for a ContentControl and this works as expected. I have attached the sample.
Please provide me with more information on what your data context looks like and where you are using the DataTemplate so that I can be of further assistance.
The last same you sent is much closer to how I'm using the bullet graphs in a Data Template. The data context or more or less the exact same. The only difference is that I have Listbox bound to an observable collection and the bullet graphs are in the data template. Here is the main part of my xaml where you can see how the binding is wired up to the collection. The ItemTemplate is defined in the code from the earlier post.
Here's the xaml for the entire usercontrol:
<UserControl.DataContext> <vm:GraphHelper/> </UserControl.DataContext> <UserControl.Resources> <Style x:Key="titleStyle" TargetType="TextBlock"> <Setter Property="TextWrapping" Value="WrapWithOverflow"/> <Setter Property="FontWeight" Value="Bold"/> </Style> <DataTemplate x:Key="graphObjectItemTemplate"> <Grid> <igGauge:XamBulletGraph Height="80" VerticalAlignment="Center" MinimumValue="{Binding MinValue}" MaximumValue="{Binding MaxValue}" Interval="{Binding Interval}" MinorTickCount="{Binding MinorTickCount}" TickBrush="#F79646" TickStrokeThickness="3" TargetValue="{Binding TargetValue}" TargetValueBreadth="12" TargetValueName="{Binding TargetValueName}" TargetValueBrush="White" TargetValueOutline="Black" TargetValueStrokeThickness=".5" Value="{Binding Value}" ValueName="{Binding ValueName}" ValueBrush="White" ValueOutline="Black" ValueStrokeThickness=".5" LabelFormat="{}{0}" Title="{Binding Title}" TitleStyle="{DynamicResource titleStyle}" TitlesHorizontalRatio=".2" ShowToolTip="True" FontWeight="Bold"> <igGauge:XamBulletGraph.Ranges> <ig:XamLinearGraphRange StartValue="{Binding LowRangeMinValue}" EndValue="{Binding LowRangeMaxValue}" Brush="#FFDA30" Caption="{Binding LowRangeCaption}"/> <ig:XamLinearGraphRange StartValue="{Binding HighRangeMinValue}" EndValue="{Binding HighRangeMaxValue}" Brush="#F66656" Caption="{Binding HighRangeCaption}"/> </igGauge:XamBulletGraph.Ranges> </igGauge:XamBulletGraph> <igGauge:XamBulletGraph Height="80" Background="Transparent" VerticalAlignment="Center" MinimumValue="{Binding MinValue}" MaximumValue="{Binding MaxValue}" Interval="{Binding Interval}" MinorTickCount="{Binding MinorTickCount}" TickBrush="Transparent" TickStrokeThickness="3" TargetValue="{Binding StandardDeviation}" TargetValueBreadth="10" TargetValueName="{Binding StandardDeviationValueName}" TargetValueBrush="DimGray" TargetValueOutline="Black" TargetValueStrokeThickness=".5" Value="{Binding Value}" ValueName="{Binding ValueName}" ValueBrush="Transparent" ValueOutline="Transparent" ValueStrokeThickness=".5" LabelFormat="{}{0}" Title="{Binding Title}" TitleStyle="{DynamicResource titleStyle}" TitlesHorizontalRatio=".2" ShowToolTip="True" FontWeight="Bold"> <igGauge:XamBulletGraph.Ranges> <ig:XamLinearGraphRange StartValue="{Binding LowRangeMinValue}" EndValue="{Binding LowRangeMaxValue}" Brush="Transparent" Caption="{Binding LowRangeCaption}"/> <ig:XamLinearGraphRange StartValue="{Binding HighRangeMinValue}" EndValue="{Binding HighRangeMaxValue}" Brush="Transparent" Caption="{Binding HighRangeCaption}"/> </igGauge:XamBulletGraph.Ranges> </igGauge:XamBulletGraph> </Grid> </DataTemplate> </UserControl.Resources> <DockPanel Margin="5" LastChildFill="True" x:Name="mainDock"> <TextBlock Text="{Binding GadgetObject.GraphTitle}" DockPanel.Dock="Top" TextWrapping="Wrap" FontSize="18" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center"> </TextBlock> <ListBox ItemsSource="{Binding GadgetObject.GraphObjects}" ItemTemplate="{DynamicResource graphObjectItemTemplate}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" DockPanel.Dock="Bottom"> </ListBox> </DockPanel></UserControl>
As long as the values bound to your graphs are in the Items of the collection bound to the ListBox this should work as expected. I have attached a modified sample which closer resembles your scenario to demonstrate this. If you are still having issue with the graph displaying it would be best of you could provide a simple sample illustrating the issue so that I can be of further assistance.
I see that your sample is working and you are even using my exact xaml, so our implementation is almost identical. The only difference is that the second bullet graph covers the underlying bullet graph. Everything is correct in both bullet graphs including the ranges and I can look at the properties and see that my GraphObjects collection have all of the values set. For some reason though, the transparency just is not there for the second bullet graph with the Standard Deviation.
One other bit of info that may or may not apply...I'm using the Infragistics Themes. I think currently in my testing I am using the Office2013 (Light) theme. Could that have any influence?
I will see if I can do anything to recreate this in the last sample you have sent.
//AB
Good recommendation. It fixed the issue for me.
I left everything else the same, but just set Style="{x:Null}" on the second Standard Deviation only xamBulletGraph that sits on top of the main graph in my data template and now it is showing up as expected.
I may have some minor UI things to tweak like the title style as you suggested, but this is the missing piece I was looking for.
Thanks!
The theme would effect this workaround since there are colors applied within it which override the values set in XAML. Does changing the following settings on your second (top) bullet graph resolve the issue: setting the style, titlestyle, and subtitlestyle, to null (ex Style={x:null}) and setting the title to a string of spaces equal to the length of the actual title.