WPF怎么自定义设计成这个界面！

Posted 2023-04-18

可以自定义控件拖拽。
自己可以给控件自定义属性。
如果有DEMO万分感谢、

总结回答你的提问：

控件在wpf中如何拖曳：网上参考链接很多，我给个做下参考http://blog.csdn.net/woshinia/article/details/7427457

怎样给控件自定义属性：

1）选中你要更改属性的控件（后台通过鼠标事件判断）

2）前台触发UI事件更改控件相关属性即可

追问

我是现在想在左侧放一些控件，右侧是属性。这个不知道要怎么设计。刚接触WPF还不懂这个要用什么布局来实现

追答

wpf里的容器控件有WrapPanel,StackPanel,Grid等。你做自适应界面的话，最适合用Grid了。分成三列就行了。

参考技术A 看一下MSDN，里面有关于WPF设计器扩展的详细内容。找一下WPF设计器所在的类，在Microsoft.Expression.DesignModel.dll里。注册元数据，再显示设计器和属性窗口。WPF有一个关于工具箱的控件，好像叫ToolBox什么的，可以自己在VS里添加。本回答被提问者采纳

WPF 自定义IconButton

自定义一个按钮控件

按钮控件很简单，我们在项目中有时把样式封装起来，添加依赖属性，也是为了统一。

这里举例，单纯的图标控件怎么设置

1、UserControl界面样式

<UserControl x:Class="WpfApplication12.IconButton"                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" 
                d:DesignHeight="300" d:DesignWidth="300" Loaded="IconButton_OnLoaded">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle x:Name="T_Rectangle" Height="15" Width="15">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="{Binding ImagesSource}"></ImageBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="T_Rectangle" Property="Height" Value="18"></Setter>
                                <Setter TargetName="T_Rectangle" Property="Width" Value="18"></Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="T_Rectangle" Property="Height" Value="20"></Setter>
                                <Setter TargetName="T_Rectangle" Property="Width" Value="20"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Button Click="ButtonBase_OnClick"></Button>
    </Grid>
</UserControl>

2、后台设置，我这边只添加了个图片路径和事件委托。其它的自己加吧

    public partial class IconButton : UserControl
    {
        public IconButton()
        {
            InitializeComponent();
        }

        public ImageSource ImagesSource
        {
            get { return (ImageSource)GetValue(ImagesSourceProperty); }
            set { SetValue(ImagesSourceProperty, value); }
        }

        public static readonly DependencyProperty ImagesSourceProperty = DependencyProperty.Register("ImagesSource",
        typeof(ImageSource), typeof(IconButton));

        private void IconButton_OnLoaded(object sender, RoutedEventArgs e)
        {
            var data = new IconButtonModel()
            {
                ImagesSource = ImagesSource
            };
            this.DataContext = data;
        }

        public delegate void ClickEventArgs(object sender, RoutedEventArgs e);

        public event ClickEventArgs Click;
        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            if (Click != null)
            {
                Click(sender, e);
            }
        }
    }

    public class IconButtonModel
    {
        public ImageSource ImagesSource { get; set; }
    }