0

I know globally modifying theme colors with template binding way not supported in Uno yet. (I tried it for ToggleSwitch, now ToggleSwitch custom style runs perfectly both on UWP and WASM). So, I prepared a custom style for WinUI 2.4 ProgressRing in a same way. I gathered the default style of ProgressRing from WinUI Github repo and customize it:

 <!-- Default style for Microsoft.UI.Xaml.Controls.ProgressRing -->
            <Style x:Key="AcmProgressRing" TargetType="controls:ProgressRing">
                <Setter Property="Foreground" Value="{StaticResource AcmPink}" />
                <Setter Property="Background" Value="{StaticResource AcmPurple}" />
                <Setter Property="IsHitTestVisible" Value="False" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="MinHeight" Value="16" />
                <Setter Property="MinWidth" Value="16" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Width" Value="32" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="controls:ProgressRing">
                            <Grid x:Name="LayoutRoot" Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Active">
                                            <Storyboard>
                                                <DoubleAnimation
                                            Storyboard.TargetName="LayoutRoot"
                                            Storyboard.TargetProperty="Opacity"
                                            To="1"
                                            Duration="0:0:0.15" />
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Inactive">
                                            <Storyboard>
                                                <DoubleAnimation
                                            Storyboard.TargetName="LayoutRoot"
                                            Storyboard.TargetProperty="Opacity"
                                            To="0"
                                            Duration="0" />
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <!-- AnimatedVisualPlayer for Lottie -->
                                <controls:AnimatedVisualPlayer x:Name="IndeterminateAnimatedVisualPlayer" AutoPlay="false" Stretch="fill"/>

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

My ProgressRing is:

<controls:ProgressRing x:Name="Waiter" Width="50" Height="50" Style="{StaticResource AcmProgressRing}" IsActive="True"/>

As you see, the style runs correctly on UWP: enter image description here

However, WASM shows default style :(

enter image description here

Packages

  - Uno.UI.RemoteControl {2.4.0}

  - Newtonsoft.Json {12.0.3}

  - Uno.UI.Lottie {2.4.0}

  - Uno.Wasm.Bootstrap {1.2.0}

  - Uno.Wasm.Bootstrap.DevServer {1.2.0}

  - ACM_Search_AdminApps.Shared {1.1.0}

  - Microsoft.Extensions.Logging.Filter {1.1.2}

  - Microsoft.Extensions.Logging.Con... {1.1.1}

  - NETStandard.Library {2.0.3}

   - Uno.UI {2.4.0}

   - ACM_Search_AdminApps.Shared {1.1.0}

  - Microsoft.NETCore.UniversalWindo... {6.2.10}

   - Microsoft.Extensions.Logging.Con... {1.1.1}

  - Microsoft.Extensions.Logging.Filter {1.1.2}

  - Microsoft.Toolkit.Uwp.UI.Lottie {6.0.0}

  - Microsoft.UI.Xaml {2.4.2}

   - Newtonsoft.Json {12.0.3}

  - Uno.Core {2.0.0}

WinUI ProgressRing's style on WASM must match with UWP style. How can I fix this ? Thanks.

berkb
  • 542
  • 6
  • 21
  • Where did you place you default style ? – Jérôme Laban May 27 '20 at 11:34
  • In App.xaml :) @JeromeLaban – berkb May 27 '20 at 14:15
  • Can you try creating another resource dictionary, and place the default style there, and reference it from the App.xaml ? It's probably something that will be fixed by https://github.com/unoplatform/uno/pull/1766 – Jérôme Laban May 27 '20 at 14:29
  • Sure, I will try it and inform you. @JeromeLaban – berkb May 27 '20 at 14:53
  • Same issue again. So I decided to use custom Lottie animation instead of ProgressRing. However, a different Javascript issue on Uno.Lottie prevents me to using on WASM. Maybe, it causes both ProgressRing animation and theme issues: https://stackoverflow.com/questions/62030326/uncaught-type-javascript-error-in-uno-lottie-webassembly?noredirect=1#comment109740278_62030326 – berkb May 27 '20 at 16:04
  • Changing variables (colors) of a Lottie animation is not supported yet on Uno.UI.Lottie. – Carl de Billy May 27 '20 at 19:41

0 Answers0