WPF 自定义ScrollViewer

最新推荐文章于 2024-08-09 14:19:22 发布
最新推荐文章于 2024-08-09 14:19:22 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： WPF 文章标签： wpf 自定义ScrollViwer 样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvguoshan/article/details/47832727
版权


刚自定义ScrollViewer样式：如下




一、关于滚动条构成



二、样式总体代码一锅贴


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

    <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
    <!--ScrollViewer样式-->
    <Style TargetType="ScrollViewer" x:Key="ScrollViewerStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ScrollViewer}">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <!--右下角四方形-->
                        <Rectangle x:Name="Corner"  Grid.Row="1" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                        <!--内容区域-->
                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
                        <!--竖直滚动条-->
                        <ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Style="{DynamicResource ScrollBarStyle}"/>
                        <!--水平滚动条-->
                        <ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{DynamicResource ScrollBarStyle}" ViewportSize="{TemplateBinding ViewportWidth}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>
    
    <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 Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <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 Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--Theum-->
    <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}">
                    <Border x:Name="border" CornerRadius="3" Background="#ACACAC" BorderThickness="0" >

                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#888888"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#888888"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--滚动条样式-->
    <Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
        <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 x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <Grid.RowDefinitions>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                            <RowDefinition Height="0.00001*"/>
                            <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                        </Grid.RowDefinitions>
                        <!--上箭头-->
                        <RepeatButton Style="{DynamicResource ArrowDownPathButton}" Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}"/>
                        <!--滑动条 ？ 是不是Slider中的滑动条？？？ -是 -->
                        <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                            <!--滑动条上部区域-->
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                            </Track.DecreaseRepeatButton>
                            <!--滑动条部分-->
                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                            </Track.IncreaseRepeatButton>
                            <!--滑动条下部区域-->
                            <Track.Thumb>
                                <Thumb Style="{StaticResource ScrollBarThumb}" Margin="3,0,3,0"/>
                            </Track.Thumb>
                        </Track>
                        <!--下箭头-->
                        <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{DynamicResource ArrowUpPathButton}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <!--水平摆放时-->
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Width" Value="Auto"/>
                <Setter Property="MinWidth" Value="0"/>
                <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 x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                    <ColumnDefinition Width="0.00001*"/>
                                    <ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
                                </Grid.ColumnDefinitions>
                                <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{DynamicResource ArrowLeftPathButton}"/>
                                <Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource HorizontalScrollBarPageButton}"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource ScrollBarThumb}" Margin="0,3,0,3"/>
                                    </Track.Thumb>
                                </Track>
                                <RepeatButton Grid.Column="2" Command="{x:Static ScrollBar.LineRightCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{DynamicResource ArrowRightPathButton}"/>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
    
    <!--下箭头-->
    <Style x:Key="ArrowDownPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="180"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--上箭头-->
    <Style x:Key="ArrowUpPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"  StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--左箭头-->
    <Style x:Key="ArrowLeftPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="-90"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--右箭头-->
    <Style x:Key="ArrowRightPathButton" TargetType="RepeatButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Grid Background="Transparent">
                        <Path x:Name="PathFill" Fill="#868999" Width="13" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"  StrokeThickness="0" Data="M5.0000001,0 L10,10 L-2.0915641E-08,10 z" RenderTransformOrigin="0.500000001045782,0.5" Stretch="Fill">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform Angle="90"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#1C97EA"></Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Fill" TargetName="PathFill" Value="#FF4D84AE"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>


孤夜一点星
关注
专栏目录
WPF自定义ScrollViewer滚动条样式
FireGhost57的专栏
02-17 1303
&lt;!-- 滚动条颜色 --&gt; &lt;SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent"/&gt; &lt;SolidColorBrush x:Key="ScrollBarThumbNormal" Color="Black" Opacity="0.1" /&
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
LJianDong的博客
11-07 824
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合控件中广泛使...
WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
05-20
WPF ScrollViewer(滚动条) 自定义样式表 这个样式比较适合触摸屏上使用 滚动条设计的很宽
WPF 自定义ScrollViwer
weixin_30343157的博客
12-15 258
ScrollViewer自定义样式 ScrollViewer在各种列表、集合控件中广泛使用的基础组建，先看看效果图： 如上图，ScrollViewer简单来说分两部分，一个横向的滚动条，一个垂直滚动条，两个样式、模板、功能都基本一样，他们都是ScrollBar。以垂直滚动条为例，分解一下，分解图： 1：向上滑动的按钮，用RepeatButton实现功能； 2：上部分滑块，功能...
WPF篇（13）-ScrollViewer控件+ScrollBar滚动条+Slider滑动条
最新发布
一个人的江湖
08-09 1589
如果某个控件的尺寸太大，当前界面无法全部显示，则可以将这个控件包含在ScrollViewer中，因为ScrollViewer控件封装了一个水平滚动条ScrollBar和一个垂直滚动条ScrollBar，所以，ScrollViewer就是一个包含其它可视元素的可滚动区域控件。ScrollViewer继承于ContentControl，所以它也是一个内容控件，只能在Content属性中设置一个子元素，如果要在ScrollViewer中显示多个子元素，请设置一个集合控件。 ScrollViewer 控件既响应鼠标
WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂
weixin_30527551的博客
04-01 536
先上效果图 正常样式 拖动时样式 好下面 开始吧 ================================================================= 打开blend 新建个 WPF应用程序工程 点击左上角 文件 → 新建项目 项目类型WPF→右侧选WPF应用程序→项目名称你随便起一个用输入的ScrollViewerStyle→...
WPF自定义ScrollViewer
天空
06-10 9911
App.xaml <Application x:Class="WPFTEST.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WPF----自定义滚动条ScrollViewer
chongchong1325的博客
06-28 842
滚动条是项目当中经常用到的一个控件，大部分对外项目都有外观的需求，因此需要自定义，文中主要是针对一段动态的状态数据进行展示，并保证数据始终在最新一条，就是需要滚动条滚动到底部。
WPF实现ScrollViewer滚动到指定控件处
10-19
在WPF开发中，ScrollViewer控件用于提供可滚动的视图，允许用户查看超过屏幕范围的内容。然而，有时我们需要在程序逻辑中自动控制ScrollViewer滚动到特定的子控件，比如用户完成某个操作后自动定位到指定内容。本文...
WPF滚动条样式自定义，ScrollViewer样式自定义
小周爱学习的博客
04-03 7849
在做wpf界面制作中布局经常用到ScrollViewer控件，默认的样式很丑，跟自己设计的界面风格不搭配，需要修改成跟自己界面设计风格一样的话需要修改它的默认样式。下面就分享下代码：&lt;ScrollViewer HorizontalScrollBarVisibility="Visible" Template="{DynamicResource ScrollViewerControlTempla...
WPF ScrollViewer 自定义样式
jtl2004的专栏
12-27 3242
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:sys="clr-namespace:System;assembly=mscorlib"     Height="300"
WPF ScrollViewer(滚动条) 仿苹果样式
08-07
仿苹果样式滚动条 http://www.cnblogs.com/lanymy/p/3242569.html
自定义ScrollViewer——仿iphone和android
04-15
网上找不到 只好自己开发了 ScrollViewer是不错，不过不足够 特别是用了IPHONE和ANDROID之后 拖到底部后，还可以继续拖一小段距离 符合手触设备的用户体验 VS2010开发
WPF ScrollViewer滚动时显示滚动条样式
09-28
Blend基础上制作的滚动条样式，当滚动条滚动时才会显示滚动条
WPF ScrollViewer样式 滚动时显示滚动条
09-28
滚动时显示滚动条,其他时候隐藏样式，滚动条为细窄边框
wpf 自定义scrollviewer
大话程序员
04-14 2556
http://www.codeproject.com/Tips/115159/Silverlight-Tip-ScrollViewer-for-a-WrapPanel of sssssssssssssssssssssssscouse, scrollview can do this but, after using iphone and android
WPF 自定义滚动条控件ScrollViewer（三）
韬光养晦
09-16 1078
WPF 自定义滚动条控件ScrollViewer（三） 一、添加资源字典： ScrollViewer.xaml <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style x:Key="Scroll
WPF ScrollViewer控件添加自定义滚动条
DavidLiu的博客
07-29 518
<ScrollViewer Name="sv1" VerticalScrollBarVisibility="Hidden" Margin="0" Width="auto" Grid.Row="1"> <DockPanel Name="FlowPanel" MinWidth="20" Background="#FFE1F3D8" ></DockPanel> </ScrollViewer> <ScrollViewer .
ScrollViewer—WPF滚动条控件
小芦荟同学的博客
05-30 1827
ScrollViewer—WPF滚动条控件 ScrollViewer定义与功能、 ScrollViewer使用、ScrollViewer常用属性、滚动类型、用Button来控制ScrollViewer的滚动
WPF自定义ComboBox
05-20
在WPF中，可以通过继承ComboBox类并重写其默认模板，来实现自定义ComboBox的样式和行为。下面是一个简单的例子，演示如何创建一个带有自定义下拉框项的ComboBox。 首先，创建一个名为CustomComboBox的类，继承自ComboBox。然后，在类的构造函数内部，通过调用DefaultStyleKey属性，并传递ComboBox类型，来指定ComboBox的默认样式。 ```csharp public class CustomComboBox : ComboBox { public CustomComboBox() { DefaultStyleKey = typeof(ComboBox); } } ``` 接下来，需要定义ComboBox的模板。在模板中，我们可以指定ComboBox的各个部分的样式和行为。 ```xml <Style TargetType="{x:Type local:CustomComboBox}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:CustomComboBox}"> <Grid> <ToggleButton x:Name="PART_ToggleButton" Grid.Column="2" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"> <ToggleButton.Template> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="20"/> </Grid.ColumnDefinitions> <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/> <Path x:Name="Arrow" Grid.Column="1" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/> </Grid> </ControlTemplate> </ToggleButton.Template> </ToggleButton> <ContentPresenter x:Name="PART_ContentPresenter" Margin="5, 0, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Center" ContentSource="SelectedItem" RecognizesAccessKey="True"/> <Popup x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" Focusable="false"> <Grid x:Name="DropDown" SnapsToDevicePixels="true" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="200"> <Border x:Name="DropDownBorder" Background="{StaticResource {x:Static SystemColors.WindowBrushKey}}" BorderThickness="1" BorderBrush="{StaticResource {x:Static SystemColors.ActiveBorderBrushKey}}"/> <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="true"> <StackPanel IsItemsHost="true" KeyboardNavigation.DirectionalNavigation="Contained"/> </ScrollViewer> </Grid> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` 在模板中，我们使用了一个ToggleButton来控制下拉框的打开关闭。另外，使用了一个ContentPresenter来展示选中的项，在Popup中使用了一个StackPanel来展示下拉框选项。 最后，使用CustomComboBox来创建自定义ComboBox，并添加下拉框选项。 ```xml <local:CustomComboBox Width="150"> <ComboBoxItem>Item 1</ComboBoxItem> <ComboBoxItem>Item 2</ComboBoxItem> <ComboBoxItem>Item 3</ComboBoxItem> </local:CustomComboBox> ``` 这样，就可以创建一个具有自定义下拉框项的ComboBox了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值