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

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>

Hello Amanda,

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.

Sincerely,

Valerie

Software Developer

Infragistics

www.infragistics.com/support

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.

Thanks,

//AB

Hello Amanda,

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.

Sincerely,

Valerie

Software Developer

Infragistics

www.infragistics.com/support

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!

//Amanda