2010-12-02 12 views
2

MSDNのthis pageを使用して、スライダコントロールにカスタムスタイルを適用しました。下の図に示すように、実行時に完全に機能しますが、設計時にはスライダコントロール全体が表示されません(非表示/折りたたみ??)。デザイン時にスライダを表示させるにはどうすればよいですか?実行時にデザイン時にカスタムスライダが表示されないのはなぜですか?

スライダー: alt text

私のWPFウィンドウのカスタムスライダーの私の実装を示すXAML:

<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> 
+0

定義内で高さ/幅を追加します... –

+0

@Aaron、高さ/幅のプロパティをスタイル定義に追加すると効果がありません。また、実装でheight/widthプロパティを追加することもありません。 – Stewbob

+0

テンプレートにあなたのMinHeight/MinWidtの参照が見つかりませんでした...私の考えは何も変えていないでしょう... –

答えて

4

それはブレンド4で上手く表示されるので、これは何とかVS2010デザイナーのバグだと思います。とにかく、この問題はOrientation is Verticalトリガーと思われます。セッターとスライダーの間でテンプレートセッターまでの移動

<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> 

は、あなたがここで行う望むものではないかもしれないが、多分あなたは何とかそれを利用することができますセッターの移動

<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> 

デザイナーに表示します

+0

優秀、ありがとうございます!私のカスタムスライダを水平方向にしなければならない場合はうまくいかないかもしれませんが、垂直方向のみ必要なので、これは私のニーズに完全に対応しています。 – Stewbob

関連する問題