Question

我使用了MSDN中的this page将自定义样式应用于我的滑块控件。它在运行时完美运行，如下图所示，但在设计时，整个滑块控件不可见（隐藏/折叠??）。如何让滑块在设计时可见？

运行时滑块： alt text

XAML显示了我在WPF窗口上自定义滑块的实现：

<Slider Grid.Column="1"
        Style="{StaticResource sldGradeability}"
        Orientation="Vertical"
        Name="sldGrade" Maximum="90" Minimum="0"
        SmallChange="1" LargeChange="10" 
        Margin="5,20,10,20"/>

我自定义滑块样式的XAML：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <!--<SnippetSlider>-->
  <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>
 <!--<SnippetThumb>-->
  <Style x:Key="SliderThumbStyle"
         TargetType="{x:Type Thumb}">
      <Setter Property="SnapsToDevicePixels"
              Value="true" />
      <Setter Property="OverridesDefaultStyle"
              Value="true" />
      <Setter Property="Height"
              Value="16" />
      <Setter Property="Width"
              Value="25" />
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type Thumb}">
                  <Polygon x:Name="polyThumb"
                           Cursor="Hand"
                           StrokeThickness="1"
                           Points="0,8 6,16 24,16 24,0 6,0"
                           Stroke="{StaticResource brsDarkGrayText}"
                           Fill="{StaticResource ButtonNormal}"/>

                  <ControlTemplate.Triggers>
                      <Trigger Property="IsMouseOver"
                               Value="True">
                          <Setter TargetName="polyThumb"
                                  Property="Fill"
                                  Value="{StaticResource ButtonOver}" />
                      </Trigger>
                      <Trigger Property="IsDragging"
                               Value="True">
                          <Setter TargetName="polyThumb"
                                  Property="Fill"
                                  Value="{StaticResource ButtonDown}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
  <!--Template when the orientation of the Slider is Vertical.-->
  <ControlTemplate x:Key="VerticalSlider"
                   TargetType="{x:Type Slider}">
      <Grid>
          <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>
          <Grid Grid.Column="0">
              <Grid.RowDefinitions>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
                  <RowDefinition Height="1*"/>
              </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="90°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="1" Text="80°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="2" Text="70°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="3" Text="60°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="4" Text="50°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="5" Text="40°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="6" Text="30°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="7" Text="20°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="8" Text="10°" Style="{StaticResource SimpleTextRight}"/>
                <TextBlock Grid.Row="9" Text="0°" Style="{StaticResource SimpleTextRight}"/>
            </Grid>
        <TickBar Grid.Column="1" x:Name="TopTick"
                 SnapsToDevicePixels="True"
                 Placement="Left"
                 Width="5"
                 Visibility="Visible"
                 TickFrequency="10"
                 Fill="{StaticResource brsDarkGrayText}"/>
      <Border x:Name="TrackBackground"
              Margin="0"
              CornerRadius="2"
              Width="5"
              Grid.Column="2"
              BorderThickness="0">
        <Border.Background>
          <LinearGradientBrush EndPoint="1,0"
                               StartPoint="0,0">
                        <GradientStop Color="{StaticResource LightGrayGradient}"
                          Offset="0" />
                        <GradientStop Color="{StaticResource MediumGrayGradient}"
                          Offset="1" />
          </LinearGradientBrush>
        </Border.Background>
      </Border>
      <Track Grid.Column="2"
             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>
      <TickBar x:Name="BottomTick"
               SnapsToDevicePixels="True"
               Grid.Column="3"
               Fill="{StaticResource brsDarkGrayText}"
               Placement="Right"
               Width="4"
               Visibility="Collapsed" />
    </Grid>
    <ControlTemplate.Triggers>
      <Trigger Property="TickPlacement"
               Value="TopLeft">
        <Setter TargetName="TopTick"
                Property="Visibility"
                Value="Visible" />
      </Trigger>
      <Trigger Property="TickPlacement"
               Value="BottomRight">
        <Setter TargetName="BottomTick"
                Property="Visibility"
                Value="Visible" />
      </Trigger>
      <Trigger Property="TickPlacement"
               Value="Both">
        <Setter TargetName="TopTick"
                Property="Visibility"
                Value="Visible" />
        <Setter TargetName="BottomTick"
                Property="Visibility"
                Value="Visible" />
      </Trigger>
    </ControlTemplate.Triggers>
  </ControlTemplate>
    <!--Slider Control-->
    <Style x:Key="sldGradeability"
           TargetType="{x:Type Slider}">
        <Setter Property="SnapsToDevicePixels"
                Value="true" />
        <Setter Property="OverridesDefaultStyle"
                Value="true" />
        <Setter Property="Visibility"
                Value="Visible"/>
        <Style.Triggers>
            <Trigger Property="Orientation"
                     Value="Vertical">
                <Setter Property="MinWidth"
                        Value="21" />
                <Setter Property="MinHeight"
                        Value="104" />
                <Setter Property="Template"
                        Value="{StaticResource VerticalSlider}" />
            </Trigger>
        </Style.Triggers>
    </Style>
    <!--</SnippetSlider>-->
</ResourceDictionary>

Answer 1

它在Blend 4中表现得很好所以我认为这是VS2010设计师的一个错误。无论如何，问题似乎是方向是垂直触发。

<Style x:Key="sldGradeability" TargetType="{x:Type Slider}"> 
    <!-- ... -->
    <Style.Triggers> 
         <!-- ... -->
        <Trigger Property="Orientation" Value="Vertical"> 
            <Setter Property="Template" Value="{StaticResource VerticalSlider}" /> 
        </Trigger> 
    </Style.Triggers> 
</Style>

在Setters和Slider之间移动模板设置器会出现在设计器中

<Style x:Key="sldGradeability" TargetType="{x:Type Slider}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Visibility" Value="Visible"/>
    <Setter Property="Template" Value="{StaticResource VerticalSlider}"/>
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Vertical">
            <Setter Property="MinWidth" Value="21" />
            <Setter Property="MinHeight" Value="104" />
        </Trigger>
    </Style.Triggers>
</Style>

移动设置器可能不是你想要的，但也许你可以以某种方式使用它

为什么我的自定义滑块在设计时不可见？

1 个答案: