私の Windows Phone 8.1 プロジェクトには、ProgressBar.xaml (ここでは ProgressRing スタイルをオーバーライド) と Menu.xaml (フライアウト アイテムのテンプレート) を含む 'Resources' フォルダーが含まれています。
私の App.xaml は次のようになります。
<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 には、<Style TargetType="ProgressRing">
generic.xaml からの正確なコピーが含まれています。このスタイルは、それ自体の内部で別のスタイルを定義します:
<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>
フライアウト項目を除いて、アプリケーション全体で ProgressRingElipseThemeSize = 6.5 で問題ありません。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>
そこで、ProgressRing の高さと幅を 40 にしました。楕円のサイズを 3 に変更したいと思います。しかし、ProgressRingElipseThemeSize
内部をオーバーライド<ProgressRing.Resources>
しても変更はありません。
私ProgressRingElipseThemeSize
が変えなければならないことは確かです。<Style TargetType="ProgressRing">
このように直接変更すると
<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 は完璧に見えますが、明らかにアプリ内の他の進行状況リングが影響を受けており、これは望ましくありません。
ProgressRingElipseThemeSize
ProgressRing の新しいスタイルを定義せずに、1 つの ProgressRing のみをローカルでオーバーライドするにはどうすればよいですか?