WPF Slider在Visual Studio和app中看起来不同

时间:2017-08-20 12:53:39

标签: wpf xaml templates colors slider

我的WPF应用中有一个奇怪的行为。我有一个滑块,我想改变背景颜色。为此,我创建了一个资源字典文件并覆盖了模板。

在Visual Studio中,我的滑块看起来很好:

that what it is shown in the IDE

但是当我启动我的应用程序时,我只看到了正常的默认滑块:

how it looks when I start the app

可能出现什么问题?

我在app.xaml中添加了customslider.xaml文件,如下所示:

 <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary
                Source="./CustomSlider.xaml" />
 </ResourceDictionary.MergedDictionaries>

我的幻灯片定义为:

 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:xxxxx.UI">
<Style x:Key="SliderButtonStyle"
       TargetType="{x:Type RepeatButton}">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Setter Property="IsTabStop"
            Value="false" />
    <Setter Property="Focusable"
            Value="false" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Border Background="Transparent" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SliderThumbStyle"
       TargetType="{x:Type Thumb}">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="false" />
    <Setter Property="Height"
            Value="50" />       
    <Setter
        Property="Background"
        Value="black" />
    <Setter
        Property="Width"
        Value="50" />

</Style>

<!--Template when the orientation of the Slider is Horizontal.-->
<ControlTemplate x:Key="HorizontalSlider"
                 TargetType="{x:Type Slider}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto"
                           MinHeight="{TemplateBinding MinHeight}" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>


        <Border x:Name="TrackBackground"
                Margin="0"
                CornerRadius="2"
                Height="50"
                Grid.Row="1"
                BorderThickness="1">

            <Border.Background>
                <LinearGradientBrush EndPoint="0,0" StartPoint="1,0">

                    <LinearGradientBrush.GradientStops>
                        <GradientStopCollection>
                            <GradientStop Color="Red" Offset="0" />
                            <GradientStop Color="Yellow" Offset="0.5" />
                            <GradientStop Color="Green" Offset="1" />
                        </GradientStopCollection>
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
        <Track Grid.Row="1"
               x:Name="PART_Track">
            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderButtonStyle}"
                              Command="Slider.DecreaseLarge" />
            </Track.DecreaseRepeatButton>
            <Track.Thumb>
                <Thumb Style="{StaticResource SliderThumbStyle}" />
            </Track.Thumb>
            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderButtonStyle}"
                              Command="Slider.IncreaseLarge" />
            </Track.IncreaseRepeatButton>
        </Track>

    </Grid>

</ControlTemplate>

<Style TargetType="{x:Type Slider}">
    <Setter Property="SnapsToDevicePixels"
            Value="true" />
    <Setter Property="OverridesDefaultStyle"
            Value="true" />
    <Style.Triggers>
        <Trigger Property="Orientation"
                 Value="Horizontal">                
            <Setter Property="Template"
                    Value="{StaticResource HorizontalSlider}" />
        </Trigger>

    </Style.Triggers>
</Style>

编辑(已添加):

    <Slider     
                                    HorizontalAlignment="Center"
                                    IsMoveToPointEnabled="True"
                                    Thumb.DragStarted="ValueChangeDragStart"
                                    Thumb.DragCompleted="ValueChangeDragEnd"
                                    Maximum="100"
                                    Minimum="-100"
                                    Name="VolumeSlider"
                                    ValueChanged="ValueChanged"
                                    Width="490"                                        
                                    IsSnapToTickEnabled="True"
                                    TickFrequency="1"                                        
                                    Margin="0,-18,0,0">    
                                </Slider>

0 个答案:

没有答案