拇指控件突出显示和拖动外观

Question

我在 Windows 商店应用程序中使用拇指控件来表示可拖动的图像。但是，每当我将鼠标悬停在它上面时，它就会变成一个灰色框，当我拖动它时，它会变成一个更深的灰色框。释放时它会恢复为我给它作为背景的图像。有什么方法可以关闭或自定义高亮/焦点和拖动外观？

编辑：

这是我用于控件的 XAML。我把它放在一个网格里，但不做任何事情。

<Canvas x:Name="PART_background" Background="White" Height="140" Width="20">
    <Thumb x:Name="PART_drag" Canvas.Left="0" Width="20" Height="50">
        <Thumb.BorderBrush>
            <SolidColorBrush Color="Black" Opacity="0"></SolidColorBrush>
        </Thumb.BorderBrush>

        <Thumb.Background>
            <ImageBrush x:Name="PART_image" Stretch="None" AlignmentX="Center" />
        </Thumb.Background>
    </Thumb>
</Canvas>

Answer 1

您需要编辑模板 - 它在 Blend 中效果最佳，然后更改视觉状态动画。默认模板有一些Border 元素和各种视觉状态（PointerPressed、PointerOver） - 它为这些边框的不透明度设置动画。这是提取的模板。您可以简单地删除情节提要以摆脱视觉反馈。

<Page
    x:Class="App132.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App132"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="ThumbStyle1" TargetType="Thumb">
            <Setter Property="Background" Value="{StaticResource ThumbBackgroundThemeBrush}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="BorderBrush" Value="{StaticResource ThumbBorderThemeBrush}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPointerOver"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundPressed"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="Focused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                            <Border x:Name="BackgroundPointerOver" BorderBrush="{StaticResource ThumbPointerOverBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPointerOverBackgroundThemeBrush}" Opacity="0"/>
                            <Border x:Name="BackgroundPressed" BorderBrush="{StaticResource ThumbPressedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ThumbPressedBackgroundThemeBrush}" Opacity="0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Thumb HorizontalAlignment="Left" Height="270" Margin="170,230,0,0" VerticalAlignment="Top" Width="390" Style="{StaticResource ThumbStyle1}"/>
    </Grid>
</Page>