Проблема со стилем всплывающей подсказки ползунка UWP

Моя всплывающая подсказка сначала выглядит нормально, а через пару секунд имеет белую рамку. Изображение имеет прозрачный фон. Просто интересно, как избавиться от этого?

Определение класса:

using System;
using Windows.UI.Xaml;

using SynaAudio.Core;

namespace TestProject.Client.MixerPage
{
    /// <summary>
    /// Interaction logic for MasterSettingsHandler.xaml
    /// </summary>
    public partial class MasterSettingsHandler
    {
        public MasterSettingsHandler()
        {
            try
            {
                InitializeComponent();
            }
            catch (Exception e)
            {
            }
        }
    }
}

xaml-код:

<Page x:Class = "TestProject.Client.MixerPage.MasterSettingsHandler"
      xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable = "d" Width = "660" Height = "50" >

    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source = "ms-appx:///TestProject/Resources/Templates/Slider.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>

    <Border Name = "bdrMas" Background = "#FF262626">
        <Grid Name = "gridMas" Margin = "10,0,10,0" VerticalAlignment = "Stretch">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width = "150" />
                <ColumnDefinition Width = "40" />
                <ColumnDefinition Width = "*" />
                <ColumnDefinition Width = "120" />
            </Grid.ColumnDefinitions>

            <TextBlock Name = "_endPointLabel" 
                       Text = "Master Volume" 
                       FontSize = "13" Margin = "10,0"
                       HorizontalAlignment = "Left" VerticalAlignment = "Center" Foreground = "#FFDADADA"
                       TextAlignment = "Center" TextTrimming = "WordEllipsis" TextWrapping = "Wrap" />

            <Slider Name = "_volumeSlider" x:FieldModifier = "public"
                    Style = "{StaticResource SaSlider}"
                    Value = "{Binding Path=Volume, Mode=TwoWay}" 
                    HorizontalAlignment = "Stretch" VerticalAlignment = "Center"
                    Grid.Column = "2" 
                    LargeChange = "1" SmallChange = "1" 
                    Orientation = "Horizontal" />
        </Grid>
    </Border>

</Page>

Стиль слайдера:

<ResourceDictionary xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" >

    <Style x:Key = "SaSlider" TargetType = "Slider" >
        <Setter Property = "Template" Value = "{StaticResource FancySliderControlTemplate}" />
    </Style>

    <ControlTemplate x:Key = "FancySliderControlTemplate" TargetType = "Slider">
        <Grid x:Name = "RootGrid" Margin = "{TemplateBinding Padding}">
            <Grid.Resources>
                <Style TargetType = "Thumb" x:Key = "SliderThumbStyle">
                    <Setter Property = "BorderThickness" Value = "0" />
                    <Setter Property = "Background" Value = "#FF36A4F1" />
                    <Setter Property = "Template">
                        <Setter.Value>
                            <ControlTemplate TargetType = "Thumb">
                                <Border x:Name = "bdrThumb" Background = "{TemplateBinding Background}"
                                        BorderBrush = "{TemplateBinding BorderBrush}"
                                        BorderThickness = "0"
                                        CornerRadius = "7" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height = "Auto" />
                <RowDefinition Height = "*" />
            </Grid.RowDefinitions>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name = "CommonStates">
                    <VisualState x:Name = "Normal" />
                    <VisualState x:Name = "Pressed">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalTrackRect" Storyboard.TargetProperty = "Opacity">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "0.9" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalThumb" Storyboard.TargetProperty = "Opacity">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "0.9" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalDecreaseRect" Storyboard.TargetProperty = "Opacity">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "0.9" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalThumb" Storyboard.TargetProperty = "Height">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "16" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalThumb" Storyboard.TargetProperty = "Width">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "16" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name = "Disabled">
                    </VisualState>
                    <VisualState x:Name = "PointerOver">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalTrackRect" Storyboard.TargetProperty = "Opacity">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "0.8" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalThumb" Storyboard.TargetProperty = "Opacity">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "0.8" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "SliderContainer" Storyboard.TargetProperty = "Opacity">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "0.8" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalDecreaseRect" Storyboard.TargetProperty = "Opacity">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "0.8" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalThumb" Storyboard.TargetProperty = "Height">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "16" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalThumb" Storyboard.TargetProperty = "Width">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "16" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name = "FocusEngagementStates">
                    <VisualState x:Name = "FocusDisengaged" />
                    <VisualState x:Name = "FocusEngagedHorizontal">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "SliderContainer" Storyboard.TargetProperty = "(Control.IsTemplateFocusTarget)">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "False" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "HorizontalThumb" Storyboard.TargetProperty = "(Control.IsTemplateFocusTarget)">
                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "True" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentPresenter x:Name = "HeaderContentPresenter"
                              x:DeferLoadStrategy = "Lazy"
                              Visibility = "Collapsed"
                              Foreground = "{ThemeResource SliderHeaderForeground}"
                              Margin = "{ThemeResource SliderHeaderThemeMargin}"
                              Content = "{TemplateBinding Header}"
                              ContentTemplate = "{TemplateBinding HeaderTemplate}"
                              FontWeight = "{ThemeResource SliderHeaderThemeFontWeight}"
                              TextWrapping = "Wrap" />
            <Grid x:Name = "SliderContainer"
                    Background = "{ThemeResource SliderContainerBackground}"
                    Grid.Row = "1"
                    Control.IsTemplateFocusTarget = "True">

                <Grid x:Name = "HorizontalTemplate" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width = "Auto" />
                        <ColumnDefinition Width = "Auto" />
                        <ColumnDefinition Width = "*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height = "6" />
                        <RowDefinition Height = "Auto" />
                        <RowDefinition Height = "6" />
                    </Grid.RowDefinitions>
                    <Rectangle x:Name = "HorizontalTrackRect"
                               Fill = "#FF3D3D3D"
                               Height = "5"
                               Grid.Row = "1"
                               Grid.ColumnSpan = "3" />

                    <Rectangle x:Name = "HorizontalDecreaseRect" Grid.Row = "1" Grid.Column = "2" >
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint = "0,0" EndPoint = "1,1">
                                <GradientStop Color = "#FF16486C" Offset = "0.0" />
                                <GradientStop Color = "#FF36A4F1" Offset = "1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>

                    <TickBar x:Name = "TopTickBar"
                             Visibility = "Collapsed"
                             Fill = "{ThemeResource SliderTickBarFill}"
                             Height = "{ThemeResource SliderOutsideTickBarThemeHeight}"
                             VerticalAlignment = "Bottom"
                             Margin = "0,0,0,4"
                             Grid.ColumnSpan = "3" />
                    <TickBar x:Name = "HorizontalInlineTickBar"
                             Visibility = "Collapsed"
                             Fill = "{ThemeResource SliderInlineTickBarFill}"
                             Height = "{ThemeResource SliderTrackThemeHeight}"
                             Grid.Row = "1"
                             Grid.ColumnSpan = "3" />
                    <TickBar x:Name = "BottomTickBar"
                             Visibility = "Collapsed"
                             Fill = "{ThemeResource SliderTickBarFill}"
                             Height = "{ThemeResource SliderOutsideTickBarThemeHeight}"
                             VerticalAlignment = "Top"
                             Margin = "0,4,0,0"
                             Grid.Row = "2"
                             Grid.ColumnSpan = "3" />
                    <Thumb x:Name = "HorizontalThumb"
                           Style = "{StaticResource SliderThumbStyle}"
                           DataContext = "{TemplateBinding Value}"
                           Height = "14"
                           Width = "14"
                           Grid.Row = "0"
                           Grid.RowSpan = "3"
                           Grid.Column = "1"
                           AutomationProperties.AccessibilityView = "Raw" >
                        <ToolTipService.ToolTip>
                            <ToolTip>
                                <ToolTip.Style>
                                    <Style TargetType = "ToolTip">
                                        <Setter Property = "Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType = "ToolTip">
                                                    <ContentPresenter
                                                            x:Name = "LayoutRoot"
                                                            Foreground = "White"
                                                            Background = "Transparent"
                                                            Content = "{TemplateBinding Content}"
                                                            ContentTemplate = "{TemplateBinding ContentTemplate}">
                                                        <VisualStateManager.VisualStateGroups>
                                                            <VisualStateGroup x:Name = "OpenStates">
                                                                <VisualState x:Name = "Closed">
                                                                    <Storyboard>
                                                                        <FadeOutThemeAnimation TargetName = "LayoutRoot" />
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name = "Opened">
                                                                    <Storyboard>
                                                                        <FadeInThemeAnimation TargetName = "LayoutRoot" />
                                                                    </Storyboard>
                                                                </VisualState>
                                                            </VisualStateGroup>
                                                        </VisualStateManager.VisualStateGroups>
                                                    </ContentPresenter>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </ToolTip.Style>
                                <Grid Background = "Transparent">
                                    <Image Source = "ms-appx:///SmartAudioSkinHP2020/Resources/Images/Misc/Tooltip.png" Stretch = "Fill" />
                                    <TextBlock Text = "{TemplateBinding Value}" Foreground = "White" HorizontalAlignment = "Center" VerticalAlignment = "Center" />
                                </Grid>
                            </ToolTip>
                        </ToolTipService.ToolTip>
                    </Thumb>
                </Grid>
            </Grid>
        </Grid>
    </ControlTemplate>
</ResourceDictionary>

Проблема со стилем всплывающей подсказки ползунка UWP
Целевая версия: Windows 10 1803 17134

Похоже, что обычная всплывающая подсказка для большого пальца отображается через несколько секунд после моей. Я предполагаю, что это должно быть исправлено в стиле слайдера.

Работал бы над другими задачами, если бы это был WPF :(

Я не могу воспроизвести вашу проблему. См. Снимок экрана. Укажите минимальный воспроизводимый пример и сообщите мне целевую версию вашего проекта и версию сборки ОС.

Xie Steven 25.06.2019 08:39

Xavier Xie - MSFT, я обновил это, добавив больше кода. Спасибо!

Randall Deetz 25.06.2019 19:01

Было бы полезно, если бы вы могли опубликовать код для вашего примера.

Randall Deetz 26.06.2019 19:24

Я могу воспроизвести эту проблему, используя ваш код в целевой версии проекта (17134). Если я переключу целевую версию на Windows 10 1903 (18362), я столкнусь с этой проблемой. Итак, эта проблема была исправлена ​​в последней версии 18362. Пожалуйста, попробуйте.

Xie Steven 27.06.2019 03:56

У меня нет доступа к 1903. Я перешел на 1809, но проблема осталась. Я попрошу ИТ сделать обновление. Спасибо за вашу помощь. Если вы опубликуете ответ, я приму его.

Randall Deetz 27.06.2019 06:33
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
5
303
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я могу воспроизвести эту проблему, используя ваш код в целевой версии проекта (17134/17763). Если я переключу целевую версию на Windows 10 1903 (18362), я не столкнусь с этой проблемой. Итак, эта проблема была исправлена ​​в последней версии 18362. Пожалуйста, попробуйте.

Другие вопросы по теме