UWP滑块工具提示样式问题

时间:2019-06-24 22:48:28

标签: xaml 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>

TEST
目标版本:Windows 10 1803 17134

似乎在我的几秒钟后显示了正常的拇指工具提示。我认为这需要用滑块样式来解决。

如果这是WPF,将从事其他任务:(

1 个答案:

答案 0 :(得分:1)

我可以通过在项目的目标版本(17134/17763)中使用您的代码来重现此问题。如果将目标版本切换到Windows 10 1903(18362),则不会遇到此问题。因此,此问题已在最新的18362中修复。请尝试一下。