[原譯]如何創建WPF用戶控件&在WPF項目中使用

簡單科普文，作者給的Demo我合並了下。VS2010直接打開解決方案。二者都有。

介紹
本文展示在WPF中如何創建用戶控件並且如果在WPF項目中使用。我將使用VS2008和C#來展示如何創建一個自定義的ToolTip

背景

這篇由Sacha Barber.寫的和我的有點像。

使用代碼

開始。首先，我們創建一個用戶控件。因此，我們選擇新建WPF用戶控件類庫（WPF User Control Library）。

現在。我們可以創建或者編輯XAML代碼來創建自定義的用戶控件了。我使用XAML來創建自定義的ToolTip。你想做什么隨你。

<UserControl 
    Name="UserControlToolTip"
    x:Class="CustomToolTip.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" RenderTransformOrigin="0,0" HorizontalAlignment="Left" 
    VerticalAlignment="Top" >

    <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="#FFE6D9AA" 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="#FFE6D9AA" 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="#FFE6D9AA" 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="#FFE6D9AA" Offset="0.996"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock Text="TextBlock" 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="title" d:LayoutOverrides="Height" />
    </Grid>
</UserControl>

 

 

同時。我們需要添加一些方法和屬性來控制這些元素。

namespace CustomToolTip
{
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }

        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快捷鍵來生成dll文件。現在可以創建WPF項目並且使用我們的控件了。我們選擇WPF應用程序項目

然后。我們添加對我們的控件生成dll的引用（注意。其實還可以把這兩個項目放在同一個解決方案里。然后此處添加對項目的引用就可以 –譯者）

我們將會在XAML窗體里使用自定義的用戶控件。因此我們需要添加一些額外的XAML代碼。我們在Window元素里添加下面一行。

至少。我們必須有一個Window 元素。。

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:myToolTip="clr-namespace:CustomToolTip;assembly=CustomToolTip"
    Title="Window1" Height="600" Width="800">
</Window>

 

好。現在我們在XAML中像這樣使用控件

最后。我創建了如下的XAML代碼：

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:myToolTip="clr-namespace:CustomToolTip;assembly=CustomToolTip"
    Title="Window1" Height="600" Width="800">
    <Grid x:Name="rootGrid" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform x:Name="rootGridXY" X="0" Y="0"/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Rectangle Margin="26,34,496,374" Name="rectangle1" Stroke="Black" 
                   Fill="Coral" MouseLeave="rectangle_MouseLeave" 
        MouseMove="rectangle_MouseMove" />
        <Rectangle Fill="Lavender" Margin="537,29,53,376" Name="rectangle2" 
                   Stroke="Black" MouseMove="rectangle_MouseMove" 
        MouseLeave="rectangle_MouseLeave" />
        <Rectangle Fill="Peru" Margin="192,391,186,37.995" Name="rectangle3" 
                   Stroke="Black" MouseMove="rectangle_MouseMove" 
        MouseLeave="rectangle_MouseLeave" />
        <myToolTip:UserControl1 UserControlTextBlockToolTip="Some texts" 
                                UserControlToolTipTitle="Title" 
                                Visibility="Hidden" 
                                x:Name="customToolTip" />
    </Grid>
</Window>

 

 

再寫一些方法來顯示/隱藏我們的自定義ToolTip

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void rectangle_MouseLeave(object sender, MouseEventArgs e)
        {
            state = true;
            customToolTip.Visibility = Visibility.Hidden;
        }

        bool state = true;
        Random rand = new Random(DateTime.Now.Millisecond);

        private void rectangle_MouseMove(object sender, MouseEventArgs e)
        {
            if (state)
            {
                customToolTip.Visibility = Visibility.Visible;
                customToolTip.UserControlToolTipTitle = 
            (sender as Rectangle).Name.ToUpperInvariant();
                customToolTip.UserControlTextBlockToolTip = "";
                for (int i = 0; i < rand.Next(1, 30); i++)
                    customToolTip.UserControlTextBlockToolTip += (sender as Rectangle).Name 
                        + "\t" + i.ToString() + "\n";
            }
            customToolTip.UserControlToolTipX = Mouse.GetPosition(this).X + 10;
            customToolTip.UserControlToolTipY = Mouse.GetPosition(this).Y + 10;
            state = false;
        }
    }
}

 

完了。

Demo下載
CustomToolTipDemo

許可
本文包括源代碼和文件在CPOL下授權。

 

原文地址：How-to-Creating-a-WPF-User-Control-using-it-in-a-W

著作權聲明：本文由http://leaver.me 翻譯，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！