自定义后滑块不工作 XAML

Question

我有一个 windows phone 项目 (WPF)，我在其中使用滑块控件来更改媒体的音量。滑块运行良好，但我必须根据项目设计自定义滑块。所以我定制了它，但定制后滑块不再起作用。它不显示绑定值，它不查找（即使点击和操作的绑定函数按应有的方式触发）。简而言之，自定义后它看起来像一个没有任何操作的静态用户控件。

以下是在App.xaml中编写的用于自定义滑块的代码：

    <ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
        <Rectangle Fill="Transparent"/>
    </ControlTemplate>

    <ControlTemplate x:Key="SliderThumbTemplate" TargetType="Thumb">
        <Image x:Name="ThumbImage" Source="ms-appx:///Images/PlayList/slider_knob.png" />
    </ControlTemplate>

    <Style x:Key="VolumeControlSliderStyle" TargetType="Slider">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid Background="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="0"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="VerticalTrack" Fill="#7b5798" IsHitTestVisible="True" Margin="12,0" Grid.RowSpan="3" Width="17" RadiusX="5" RadiusY="5"/>
                        <Rectangle x:Name="VerticalFill" Fill="#b09bc1" IsHitTestVisible="True" Margin="12,9" Grid.Row="2" Width="5"/>
                        <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource PhoneSimpleRepeatButton}" MinWidth="0"/>
                        <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource PhoneSimpleRepeatButton}" MinWidth="0"/>
                        <Thumb x:Name="VerticalThumb"  Height="1" Margin="0,-1,0,0" RenderTransformOrigin="0.5,0.5" Grid.Row="1" Template="{StaticResource SliderThumbTemplate}">
                            <Thumb.RenderTransform>
                                <ScaleTransform ScaleY="20" ScaleX="20"/>
                            </Thumb.RenderTransform>
                        </Thumb>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Slider Style Ends-->

以下是 UI XAML 中声明滑块的代码：

<Slider
    Minimum="0"
    Maximum="100"
    Style="{StaticResource VolumeControlSliderStyle}"
    Value="{Binding Source={StaticResource Locator}, Path=MusicPlaylist.Volume, Mode=TwoWay}"
    ManipulationMode="All"
    HorizontalAlignment="Center"
    ManipulationStarted="VolumeChanged"
    ManipulationDelta="VolumeChanged"
    ManipulationCompleted="VolumeChanged"
    Tapped="VolumeChanged"
    Orientation="Vertical"
    Margin="0,10,0,0"
    Height="150" />

在定制之前一切正常，但在定制之后滑块只是保持空闲状态，它不改变值，不寻找也不做任何事情。但是，如果我删除样式，它会再次简单地工作，这让我认为问题出在样式代码上（在 XAML 中）。但我不能确定是什么。请帮忙。

编辑

我按照this tutorial进行定制。

Answer 1

我认为您必须修改轨道的不同部分才能使其正常工作。

this post 上有一些代码示例可以提供帮助。

Answer 2

我使用 Blend for Visual Studio 创建了一个自定义滑块并丢弃了上面的代码。那解决了问题。

自定义后滑块不工作 XAML

Slider not working after customization XAML

c#

windows

wpf

xaml

slider