CODEWITHSUNDEEP
xamluwpwin-universal-app
Seaky Lone
Seaky Lone

Reputation: 1031

UWP Same Thumb Style but looks different

I used the same style for the Thumb of the slider, but the Thumb looks different in different context.

Expected Pressed Thumb:

Expected Normal Thumb

Expected Pressed Thumb:

Expected Pressed Thumb

Real Normal Thumb:

Real Normal Thumb

Real Pressed Thumb

Real Pressed Thumb

As you can see from the real ones, they are somewhat transparent in the middle. Why are they different from the expected ones? How can I make them behave like the expected ones? They share the same code.

These are the styles:

<Style x:Key="SliderThumbStyle" TargetType="Thumb">
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Ellipse
                    x:Name="ellipse"
                    Fill="{StaticResource MediaSliderThumbFillBrush}"
                    Stroke="White"
                    StrokeThickness="3.2" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style
    x:Key="SliderPressedThumbStyle"
    BasedOn="{StaticResource SliderThumbStyle}"
    TargetType="Thumb">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Ellipse
                    x:Name="ellipse"
                    Fill="White"
                    Stroke="White"
                    StrokeThickness="3.2" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style
    x:Key="SliderPointerOverThumbStyle"
    BasedOn="{StaticResource SliderThumbStyle}"
    TargetType="Thumb">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Ellipse
                    x:Name="ellipse"
                    Fill="{StaticResource MediaSliderThumbFillBrush}"
                    Stroke="{StaticResource MedialSliderPointerOverThumbStrokeBrush}"
                    StrokeThickness="3.2" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

These are the brushes:

<media:BackdropBlurBrush x:Key="MediaSliderThumbFillBrush" Amount="50" />
<AcrylicBrush
    x:Key="MediaSliderTrackRectBrush"
    BackgroundSource="Backdrop"
    FallbackColor="White"
    TintColor="White"
    TintOpacity="0.25" />
<AcrylicBrush
    x:Key="MedialSliderPointerOverThumbStrokeBrush"
    BackgroundSource="Backdrop"
    FallbackColor="White"
    TintColor="White"
    TintOpacity="0.75" />

Upvotes: 0

Views: 89

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

UWP Same Thumb Style but looks different

Please check MediaControl.xaml custom control. You set the Opacity as 0.75 for FullMediaControlGrid grid cause this issue, you could solve this by setting Opacity as 1.0.

<Grid
    x:Name="FullMediaControlGrid"
    Background="{x:Bind Background}"
    Opacity="1"
    RequestedTheme="Dark"
    Visibility="Visible">

Upvotes: 2

Related Questions