Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Will
760
xamBulletGraph Styling
posted

Hello,

I'm attempting to style a bulletgraph similar to this:

I'm approaching this in my prototype by creating two Qualatative Ranges, and styling each appropriately.

<ig:QuantitativeScale.Ranges>

                        <ig:QualitativeRange Value="333" Background="Red" />

                        <ig:QualitativeRange Value="567" Background="Transparent" BorderBrush="Red"/>

</ig:QuantitativeScale.Ranges>

 

The problem I am encountering is that the BorderBrush and BorderThickness properties on QualatativeRange don't seem to have any effect - so my second range is always completely invisible. How might I implement a colored border?

For my second question, does xamBulletGraph support adding text to the datapoints, similar to the image above? This would need to be permanent, more than just a tooltip.

Thanks!

Parents
No Data
Reply
  • 17605
    posted

    You can change the control template of the Range. Try using this code:

    <Grid x:Name="LayoutRoot" Background="White">

            <Grid.Resources>

                <ControlTemplate x:Key="RangeTemplate">

                    <Border Background="{TemplateBinding Background}"

                                        BorderThickness="{TemplateBinding BorderThickness}"

                                        BorderBrush="{TemplateBinding BorderBrush}">

                        <TextBlock Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}"

                                                       HorizontalAlignment="Right"

                                                       VerticalAlignment="Center"/>

                    </Border>

                </ControlTemplate>

            </Grid.Resources>

            <ig:XamBulletGraph Height="100">

                <ig:XamBulletGraph.Scale>

                    <ig:QuantitativeScale>

                        <ig:QuantitativeScale.Ranges>

                            <ig:QualitativeRange Value="40"

                                                 Background="Red"

                                                 BorderBrush="Red"

                                                 BorderThickness="5"

                                                 Template="{StaticResource RangeTemplate}" />

                            <ig:QualitativeRange Value="90"

                                                 Background="Transparent"

                                                 BorderBrush="Red"

                                                 BorderThickness="5"

                                                 Template="{StaticResource RangeTemplate}" />

                        </ig:QuantitativeScale.Ranges>

                    </ig:QuantitativeScale>

                </ig:XamBulletGraph.Scale>

            </ig:XamBulletGraph>

        </Grid>

     

Children
No Data