3
我想要設置滑塊控件的樣式，以便可拖動滑塊的高度設置爲8像素。如何設計WPF中的滑塊控件？
在WPF中做到這一點的最簡單方法是什麼？
<Slider>
<Slider.Style>
<!-- which xaml here? -->
</Slider.style>
</Slider>
A
回答
6
滑塊控件有很多部分拇指，RepeatButtons和軌道。它是具有命名元素的那些控件之一，例如PART_Track，由代碼隱藏引用以使其正常工作。一個好的起點是使用Blend來幫助你。
開始一個新項目（或創建一個新窗口）。在XAML窗口中添加以下內容：
<ScrollBar/>
然後在混合設計窗口上的控制單擊鼠標右鍵，選擇「編輯控制部件（模板）\編輯複製...」。這將逆向設計標準控制模板。這可以被編輯。
的混合輸出是這樣的： -
<LinearGradientBrush x:Key="VerticalScrollBarPageButtonNormal" EndPoint="1, 0" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="VerticalScrollBarPageButtonPressed" EndPoint="1, 0" StartPoint="0, 0">
<GradientStop Color="#D7D5C2" Offset="0"/>
<GradientStop Color="#D7D5C2" Offset="0.05"/>
<GradientStop Color="#E3DED3" Offset="0.06"/>
<GradientStop Color="#FDFDF6" Offset="0.94"/>
<GradientStop Color="#D7D5C2" Offset="0.95"/>
<GradientStop Color="#D7D5C2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="VerticalScrollBarPageButtonDisabled" EndPoint="1, 0" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonPressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource VerticalScrollBarPageButtonDisabled}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Microsoft_Windows_Themes:ScrollChrome SnapsToDevicePixels="true" x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDragging}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}" ThemeColor="Metallic"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="HorizontalScrollBarPageButtonNormal" EndPoint="0, 1" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalScrollBarPageButtonPressed" EndPoint="0, 1" StartPoint="0, 0">
<GradientStop Color="#D7D5C2" Offset="0"/>
<GradientStop Color="#D7D5C2" Offset="0.05"/>
<GradientStop Color="#E3DED3" Offset="0.06"/>
<GradientStop Color="#FDFDF6" Offset="0.94"/>
<GradientStop Color="#D7D5C2" Offset="0.95"/>
<GradientStop Color="#D7D5C2" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalScrollBarPageButtonDisabled" EndPoint="0, 1" StartPoint="0, 0">
<GradientStop Color="#EEEDE5" Offset="0"/>
<GradientStop Color="#EEEDE5" Offset="0.05"/>
<GradientStop Color="#F3F1EC" Offset="0.06"/>
<GradientStop Color="#FEFEFE" Offset="0.94"/>
<GradientStop Color="#EEEDE5" Offset="0.95"/>
<GradientStop Color="#EEEDE5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle x:Name="Bg" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonPressed}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Bg" Value="{StaticResource HorizontalScrollBarPageButtonDisabled}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Background" Value="{StaticResource VerticalScrollBarPageButtonNormal}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
</Grid.RowDefinitions>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineUpCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow"/>
<Track x:Name="PART_Track" Grid.Row="1" IsDirectionReversed="true">
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>
</Track.DecreaseRepeatButton>
</Track>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineDownCommand}" Grid.Row="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="DownArrow"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Background" Value="{StaticResource HorizontalScrollBarPageButtonNormal}"/>
<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
<ColumnDefinition Width="0.00001*"/>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
</Grid.ColumnDefinitions>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineLeftCommand}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow"/>
<Track x:Name="PART_Track" Grid.Column="1">
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="HorizontalGripper"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageRightCommand}"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource HorizontalScrollBarPageButton}" Command="{x:Static ScrollBar.PageLeftCommand}"/>
</Track.DecreaseRepeatButton>
</Track>
<RepeatButton Style="{StaticResource ScrollBarButton}" Command="{x:Static ScrollBar.LineRightCommand}" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
用於此的命名空間是這樣的（添加到文件的頂部）： -
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"
然後，您可以明顯改變產生的風格你的心的內容
你需要以編程方式找到嵌入在控件中的滾動條，或通過改變樣式定義將樣式應用到範圍中的所有滾動條，所以： -
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
...
</Style>
成爲
<Style TargetType="{x:Type ScrollBar}">
...
</Style>
，使其適用於由樣式定義在該地區的所有滾動條。
4
您將不得不創建控制模板來重新設置所需控件的部分。
看看這個MSDN article和this文章應該幫助你。
5
2
一個很好的MSDN文章給出控制模板，所有的WPF控件可以在這裏找到：
http://msdn.microsoft.com/en-us/library/aa970773.aspx
記住，這些控件模板視覺上產生相同的控制（即：這些都是控制模板WPF使用）。但這是定製控件的可視化樹的一個很好的起點。
0
只是一個概念證明，你也可以像滑塊一樣對複合控件的單個部分進行樣式設計：但是要注意，顏色的選擇相當隨意，所以這會變得很難看。 不幸的是，如果忽略滑塊的自定義樣式，則拇指樣式不起作用。
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="{x:Type Slider}">
<Setter Property="Background" Value="Green"/>
<Setter Property="BorderBrush" Value="Navy"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid x:Name="GridRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- TickBar shows the ticks for Slider -->
<TickBar x:Name="TopTick" Height="4" Fill="Blue" Placement="Top" SnapsToDevicePixels="True" Visibility="Collapsed"/>
<Border x:Name="Border" Height="4" Grid.Row="1" Margin="0" Background="Blue" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
<!-- The Track lays out the repeat buttons and thumb -->
<Track x:Name="PART_Track" Grid.Row="1">
<Track.Thumb>
<Thumb MinWidth="15" MinHeight="30"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
</Track>
<TickBar x:Name="BottomTick" Height="4" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" SnapsToDevicePixels="True" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Slider Maximum="100" Minimum="0">
<Slider.Resources>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Background" Value="Yellow"/>
<Setter Property="Height" Value="80"/>
</Style>
</Slider.Resources>
</Slider>
</Grid>
</Page>
1
這裏有一個簡單，快捷的方式：
<Slider ...>
<Slider.LayoutTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="1" ScaleY="0.5"/>
</Slider.LayoutTransform>
</Slider>
這不正好是8個像素，但直到你得到你想要的大小，你可以玩了一下與scaleY屬性。
相關問題
- 1. 滑塊控件的EventSetter WPF
- 2. 「Spring」wpf滑塊控件
- 3. 如何設計wpf滑塊的大拇指？
- 4. WPF滑塊控件鼠標滾輪
- 5. 如何設計滑塊的樣式？
- 6. 如何設置一個wpf滑塊控件的拇指的高度
- 7. Android中的滑塊控件
- 8. LWUIT中的滑塊控件
- 9. 如何設計材質UI滑塊
- 10. Flex滑塊 - 如何添加兩個滑塊的相同控件
- 11. 如何使滑塊控件的滑塊更寬？ （使用MFC）
- 12. 讓用戶控件中的滑塊不能在WPF中縮放
- 13. 在設計UI中移動WPF控件
- 14. Jquery滑塊控件
- 15. 添加第二個拇指到WPF中的滑塊控件
- 16. WPF中的圓形滑塊
- 17. WPF中的滑塊「動畫」？
- 18. 設計時間滑塊
- 19. WPF滑塊VisualStateManager
- 20. WPF滑塊thumb.DragCompleted
- 21. 如何定位wxPython滑塊控件
- 22. 滑塊和標籤/文本塊控件交互 - WPF
- 23. WPF用戶控件的UI設計
- 24. 如何在設計WPF控件時查看摺疊的元素？
- 25. 頻率WPF的滑塊的ValueChanged-事件
- 26. WPF滑塊樣式
- 27. 旋轉滑塊WPF
- 28. WPF - 滑塊大小
- 29. WPF滑塊問題
- 30. .NET 4.0中的滑塊控件
我想使用混合，但我沒有許可:-(0123）（取決於我的老闆） – 2008-12-22 23:26:13