Gauge Themes at runtime

[Zero Gravity Chimp]

Hello

I need to change themes at runtime, 1 theme for each gauge. my structure is like this: (the following is Pseudo-Code)
        <LinearGauge Visibility="Visibility.Visible" />
        <RadialGauge Visibility="Visibility.Collapsed" />
        <RadialGauge Visibility="Visibility.Collapsed" telerik:StyleManager.Theme="halfCircleNStyle" />

What i have listed above is what i am considering to be "1 gauge" because i will switch the visibility of these on and off to give the user the different shapes and their various functionality, all based on 1 datasource. There is a dropdown combobox to choose which to display and only 1 displays at a time.

There are other "gauges" in the application, which are all instances of my UserControl which contains teh above. I hope that is clear.

Now to dynamic themes:
According to your sample apps, you implement a converter which ultimately causes something like this:

        public void ResetRootVisual()
        {
            var rootVisual = Application.Current.RootVisual as Grid;
            rootVisual.Children.Clear();
            rootVisual.Children.Add(new MainPage());
        }

This will ultimately be called in the sample apps I have seen.

The following is the real code for my radial gauge, with 3 radial ranges and 4 stateindicators which i swap around to show the right colours. To simplify matters lets pretend I just had 1 radialgauge as below:

<Grid x:Name="GaugeGrid">
                    <control:RadGauge x:Name="radGauge" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" telerik:StyleManager.Theme="Windows7" Margin="0">
                        <gauge:RadialGauge>
                            <gauge:RadialScale x:Name="radGaugeScale">
                                <gauge:RangeList>
                                    <gauge:RadialRange x:Name="Green" Min="0" Max="0"
                                        StartWidth="0.05"
                                        EndWidth="0.05"
                                        Background="{StaticResource Brush1}"
                                        TickBackground="{StaticResource Brush1}"
                                        LabelForeground="{StaticResource Brush1}"
                                        IndicatorBackground="{StaticResource Brush1}" />
                                    <gauge:RadialRange Min="0" Max="0"
                                        x:Name="Yellow"
                                        StartWidth="0.05"
                                        EndWidth="0.05"
                                        Background="{StaticResource Brush2}"
                                        TickBackground="{StaticResource Brush2}"
                                        LabelForeground="{StaticResource Brush2}"
                                        IndicatorBackground="{StaticResource Brush2}" />
                                    <gauge:RadialRange Min="0" Max="0"
                                        x:Name="Red"
                                        StartWidth="0.05"
                                        EndWidth="0.05"
                                        Background="{StaticResource Brush3}"
                                        TickBackground="{StaticResource Brush3}"
                                        LabelForeground="{StaticResource Brush3}"
                                        IndicatorBackground="{StaticResource Brush3}" />
                                </gauge:RangeList>
                                <gauge:IndicatorList>
                                    <gauge:StateIndicator  x:Name="stateIndicatorRed"
                                        Left="0.45"
                                        Top="0.75"
                                        RelativeWidth="0.2"
                                        RelativeHeight="0.2" Background="{StaticResource RadialBrush3}" Visibility="Collapsed"/>
                                    <gauge:StateIndicator  x:Name="stateIndicatorYellow"
                                        Left="0.45"
                                        Top="0.75"
                                        RelativeWidth="0.2"
                                        RelativeHeight="0.2" Background="{StaticResource RadialBrush2}" Visibility="Collapsed"/>
                                    <gauge:StateIndicator  x:Name="stateIndicatorGreen"
                                        Left="0.45"
                                        Top="0.75"
                                        RelativeWidth="0.2"
                                        RelativeHeight="0.2" Background="{StaticResource RadialBrush1}"/>
                                    <gauge:StateIndicator  x:Name="stateIndicatorOff"
                                        Left="0.45"
                                        Top="0.75"
                                        RelativeWidth="0.2"
                                        RelativeHeight="0.2" Background="{StaticResource RadialBrushOff}" Visibility="Collapsed"/>
                                    <gauge:Needle x:Name="needle" Value="0" />
                                </gauge:IndicatorList>
                            </gauge:RadialScale>
                        </gauge:RadialGauge>
                    </control:RadGauge>
</Grid>

And on the same page a combo box with the various styles in it.

When I set the theme with this line of code:

                    StyleManager.SetTheme(radGaugel, new VistaTheme());

I understand that I must now do something like described above, that is, re-create the gauge programmatically using the "new" keyword.

 My ultimate question is how can i achieve this with all the complexity involved and x:Names of all the sub-elements of my RadGauge. These sub-elements (Green, Red, IndicatorRed,IndicatorGreen, etc. etc.) I am referencing by name in the code. Can it be done at runtime using a combobox?

I also don't want to set the application theme at this point, i want to implement them per gauge. (when i say per gauge i mean for my usercontrol, "Gauge.Xaml", which happens to contain 3 radGauges to make it work how I need. I hope that is understood).

Is it possible at this point, given your current theming framework? if so, how?

Please assist!

Regards,

Paul

[Andrey]

Hi Paul,

You can save the state of each "gauge" into static dictionary using the name of the "gauge" inside the MainPage as a key.
Please, take a look at the GaugeControl class of example solution I've attached. It allows a user to select theme and appearance of gauges.
I hope it helps.

Greetings,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Zero Gravity Chimp]

Hi Andrey,

I found this immensely helpful! Thank you very much. Once I understood which part needed to be saved and how to use it on the new loaded event, it was simple enough to save it into the correct location that corresponds to my gaugecontrols. Static Dictionary is one way, I am going to use DTOs (Datatypeobjects).

Anyone trying to accomplish this in an enterprise application could use this sample app for learning! Thanks again.

Regards,

Paul