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?
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.