xaml: Change ProgressRingElipseThemeSize for single ProgressRing without defining new Style

Question

My windows phone 8.1 project contains 'Resources' folder with ProgressBar.xaml (overriden ProgressRing style here) and Menu.xaml (templates for flyout items).

My App.xaml look like this:

<Application
    x:Class="AppName.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppName">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Menu.xaml"/>
                <ResourceDictionary Source="Resources/ProgressBar.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>

ProgressBar.xaml contains the exact copy of <Style TargetType="ProgressRing"> from generic.xaml. This style defines another one inside itself:

<Style x:Key="ProgressRingEllipseStyle" TargetType="Ellipse">
    <Setter Property="Width" Value="{ThemeResource ProgressRingElipseThemeSize}"/>
    <Setter Property="Height" Value="{ThemeResource ProgressRingElipseThemeSize}"/>
    <Setter Property="Margin" Value="{ThemeResource ProgressRingElipseThemeMargin}"/>
    <Setter Property="Opacity" Value="0"/>
</Style>

<x:Double x:Key="ProgressRingElipseThemeSize">6.5</x:Double>

I am okay with ProgressRingElipseThemeSize = 6.5 all around my application except flyout items. My template for it from Menu.xaml:

<ControlTemplate TargetType="MenuFlyoutItem" 
                x:Key="CustomerFlyoutItem">
    <StackPanel Orientation="Horizontal">
        <Grid MinWidth="40">
            <Image Source="ms-appx:///Assets/Check.png"
                Stretch="None"                           
                Visibility="{Binding IsSelected,Converter={StaticResource BooleanToVisibility}}" />

            <ProgressRing Visibility="{Binding IsLoading,Converter={StaticResource BooleanToVisibility}}"
                        IsActive ="True"
                        Foreground="{StaticResource BekeyContrastSolidColorBrush}"
                        MinHeight="40"
                        MinWidth="40">
                <ProgressRing.Resources>
                    <x:Double x:Key="ProgressRingElipseThemeSize">3</x:Double>
                </ProgressRing.Resources>
            </ProgressRing>
        </Grid>
        <TextBlock Text="{Binding Name}"
                Margin="6,0,0,0"/>
    </StackPanel>
</ControlTemplate>

There I made ProgressRing height and width 40 and I'd like to change the size of ellipses to 3. But overriding ProgressRingElipseThemeSize inside <ProgressRing.Resources> does not make any changes.

I am sure ProgressRingElipseThemeSize is what I should change. If I make changes directly in <Style TargetType="ProgressRing"> like this

<Style x:Key="ProgressRingEllipseStyle" TargetType="Ellipse">
    <Setter Property="Width" Value="3"/>
    <Setter Property="Height" Value="3"/>
    <Setter Property="Margin" Value="{ThemeResource ProgressRingElipseThemeMargin}"/>
    <Setter Property="Opacity" Value="0"/>
</Style>

MenuFlyoutItem looks perfectly, but obviously other progress rings inside my app are affected which is undesirable.

How can I override ProgressRingElipseThemeSize locally for one ProgressRing only without defining a brand new style for ProgressRing?

Answer 1

How can I override ProgressRingElipseThemeSize locally for one ProgressRing only without defining a brand new style for ProgressRing?

You can only override system-level resources in App.xaml. You will need to re-template the control if you only want to change one progress ring.