创建WPF用户控件

Posted xiaowie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了创建WPF用户控件相关的知识,希望对你有一定的参考价值。

 

 

 

wpf用户自定义控件和winform创建方法类似,这里先纠正一个误区,就是有很多人也是添加,然后新建,然后是新建用户控件库,但是为什么编译好生成后Debug目录下还是只有exe文件而没有dll文件呢?这里大家要注意一下,新建要在解决方案处右键新建-新建项目,而不是在项目下新建,因为一个项目只产生一个exe的程序文件,要生成dll文件必须新建一个项目。如图:

技术分享图片

 

下面我用一个Tooltip举例新建一个用户控件:

先新建一个wpf程序,我这里命名为:“Wpf自定义控件”。然后再新建一个项目,即:"wpf用户控件"(WPF User Control Library),我这里命名为:“WpfControlLibrary1”.

技术分享图片

之后在新建的项目“WpfControlLibrary1”的xaml文件里面添加如下代码:

 

<UserControl x:Class="WpfControlLibrary1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" RenderTransformOrigin="0,0" HorizontalAlignment="Left" 
             VerticalAlignment="Top" 
             d:DesignHeight="300" d:DesignWidth="300" 
             Name="用户自定义控件">
 
    <UserControl.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform x:Name="UserControlToolTipXY" X="0" Y="0"/>
        </TransformGroup>
    </UserControl.RenderTransform>
 
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" 
    MinWidth="200" MinHeight="120">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.333*"/>
            <RowDefinition Height="0.667*"/>
        </Grid.RowDefinitions>
        <Rectangle Fill="#FFFBFBFB" Stroke="#FF000000" RadiusX="10" RadiusY="10"
             RenderTransformOrigin="0.139,0.012" StrokeThickness="1" Grid.RowSpan="2">
            <Rectangle.BitmapEffect>
                <DropShadowBitmapEffect Opacity="0.8"/>
            </Rectangle.BitmapEffect>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.139,0.012" 
            StrokeThickness="10" Stroke="{x:Null}" 
    Margin="1,1,1,1" Grid.Row="0" Grid.RowSpan="2">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0.725">
                    <GradientStop Color="#00E6D9AA" Offset="0.487"/>
                    <GradientStop Color="#FF001EFF" Offset="0.996"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.493,0.485" 
            StrokeThickness="10" Stroke="{x:Null}" Grid.RowSpan="2" Margin="1,1,1,1">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.014,0.5" StartPoint="0.211,0.5">
                    <GradientStop Color="#00E6D9AA" Offset="0.513"/>
                    <GradientStop Color="#FF001EFF" Offset="0.996"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.493,0.485" 
            StrokeThickness="10" Stroke="{x:Null}" Grid.RowSpan="2" Margin="1,1,1,1">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.493,0.002" StartPoint="0.493,0.33">
                    <GradientStop Color="#00E6D9AA" Offset="0.513"/>
                    <GradientStop Color="#FF001EFF" Offset="0.996"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.493,0.485" 
            StrokeThickness="10" Stroke="{x:Null}" Grid.RowSpan="2" Margin="1,1,1,1">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.99,0.441" StartPoint="0.794,0.441">
                    <GradientStop Color="#00E6D9AA" Offset="0.513"/>
                    <GradientStop Color="#FF001EFF" Offset="0.996"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock Text="Hello!" TextWrapping="Wrap" x:Name="TextBlockToolTip" 
            RenderTransformOrigin="0.5,0.5" Grid.Row="1" HorizontalAlignment="Left" 
                VerticalAlignment="Center" Margin="20,0,0,20" />
        <TextBlock Name="ToolTipTitle" HorizontalAlignment="Stretch" Margin="15,16,15,6.1" 
            FontSize="14" Text="用户自定义控件" d:LayoutOverrides="Height" />
    </Grid>
</UserControl>

  

效果如图:

技术分享图片

 

下面我们在cs文件中添加如下代码进行控制:

public double UserControlToolTipX
        {
            get { return this.UserControlToolTipXY.X; }
            set { this.UserControlToolTipXY.X = value; }
        }
 
        public double UserControlToolTipY
        {
            get { return this.UserControlToolTipXY.Y; }
            set { this.UserControlToolTipXY.Y = value; }
        }
 
        public string UserControlTextBlockToolTip
        {
            get { return TextBlockToolTip.Text; }
            set { TextBlockToolTip.Text = value; }
        }
 
        public string UserControlToolTipTitle
        {
            get { return ToolTipTitle.Text; }
            set { ToolTipTitle.Text = value; }
        }

  完成后我们可以看到左侧的工具箱里面已经有我们刚才添加的自定义控件了,如图:

 

技术分享图片

 

之后我们点击生成里面的生成用户控件,或者快捷键shift+F6,如图:

技术分享图片

最后在我们的debug目录下就有刚才创建的dll文件了。

技术分享图片

 

以上是关于创建WPF用户控件的主要内容,如果未能解决你的问题,请参考以下文章

如何在设计模式下调试 WPF 用户控件?

创建WPF用户控件

动态创建到 WPF 表单的用户控件上的按钮单击事件

WPF学习- AllowDrop 用户控件启用拖放功能

如何创建包含占位符以供以后使用的 WPF 用户控件

wpf中调用winform用户控件的方法