自定义XAML后滑块不工作

本文关键字:工作 XAML 自定义 | 更新日期: 2023-09-27 18:18:14

我有一个windows phone项目(WPF),我使用Slider控件来改变媒体的音量。滑块工作得很完美,但我必须根据项目设计自定义滑块。所以我自定义它,但自定义后滑块不再工作。它不显示绑定的值,也不查找(尽管tap和操纵的绑定函数被触发了)。简而言之,在自定义之后,它看起来像一个没有操作的静态用户控件。

下面是在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)。但我不能确定是什么。请帮助。

编辑

自定义XAML后滑块不工作

我认为你必须修改赛道的不同部分才能让它正常工作。

这篇文章中有一些代码示例可能会有所帮助。

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