Question

嗨其他程序员，

我正在使用一个使用Canvas显示和移动图形对象的WPF软件。当用户对某个对象进行陈词滥调时，我需要显示一个具有所选对象属性的面板。这些属性对于每个对象是不同的，一个可以具有显示的文本，另一个可以具有背景颜色或比例值。

对此进行编程的最佳方法是什么？

我有9个对象类型，我正在寻找比在面板中创建控件更优雅的东西，然后为每个图形对象类型切换。

感谢您的帮助。

编辑 - 显示设计代码：

生成的Wpf控件的停靠面板用于显示属性。

  <DockPanel x:Name="pnlProperties"  Width="200" Grid.Column="2" Background="red">

        <Grid x:Name="GridProperties" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Grid Margin="0,2,0,25" Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="55"/>
                    <RowDefinition Height="55"/>
                    <RowDefinition Height="55"/>
                    <RowDefinition Height="55"/>
                    <RowDefinition Height="95"/>
                    <RowDefinition Height="95"/>
                    <RowDefinition Height="55"/>
                    <RowDefinition Height="55"/>
                    <RowDefinition Height="55"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="80"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <!--  ***** Label ***** -->
                <Label x:Name="lblLabel1" Content="test Prop" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="0" Grid.Column="0" FontSize="16"/>

                <Label x:Name="lblLabel2" Content=" Prop 2" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="1" Grid.Column="0" FontSize="16"/>

                <Label x:Name="lblLabel3" Content=" Prop 3" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="2" Grid.Column="0" FontSize="16"/>

                <Label x:Name="lblLabel4" Content=" Prop 4" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Row="3" Grid.Column="0" FontSize="16"/>

            </Grid>

        </Grid>
    </DockPanel>

显示每个图形对象的MovableObject（userControl）的画布：

<UserControl x:Class="DashEditor.Views.ScreenView"
         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" 
         xmlns:local="clr-namespace:DashEditor.Views">

<Canvas x:Name="ObjectsCanvas" HorizontalAlignment="Center" VerticalAlignment="Center" Width="800" Height="480" AllowDrop="True" Background="Black" PreviewMouseLeftButtonDown="ObjectsCanvas_PreviewMouseLeftButtonDown" >
    <Image x:Name="imgFond" Stretch="Fill" Source="/DashEditor;component/assets/FondXAP.png" Width="800" Height="480"/>
</Canvas>

图形对象类之一：

[StructLayout(LayoutKind.Sequential)]
[XmlRoot("XapLabel")]
public class XapLabel : IXapGraphicObject
{
    private int _id;
    public int Id
    {
        get
        {
            return _id;
        }
        set
        {
            _id = value;
        }
    }

    [XmlIgnore]
    private MovableObject _Control;
    [XmlIgnore]
    public MovableObject Control
    {
        get
        {
            return _Control;
        }

        set
        {
            _Control = value;
        }
    }

    private Point _pos;
    public Point Pos
    {
        get
        {
            return _pos;
        }

        set
        {
            _pos = value;
        }
    }

    public IXapGraphicObject getXapParent(MovableObject Control)
    {
        return this;
    }

    public ObjectType Type
    {
        get
        {
            return ObjectType.Label;
        }
    }

    public XapLabel()
    {
    }

    public void ConnectToMoveEvent()
    {
        _Control.OnObjectTranslating += _Control_OnObjectTranslating;
    }

    private void _Control_OnObjectTranslating(Vector displacement)
    {
        Pos = Pos + displacement;
    }
}

Answer 1

如果您熟悉MVVM，我已经做了类似的事情： -

对于画布，我使用null绑定到您的＆＃34;图形对象的ItemsControl＆＃34;，您要添加要显示的对象在画布上。您还需要将ItemsControl的面板模板更改为Canvas： -

ObservableCollection

你的＆＃34;图形对象＆＃34;类需要公开<ItemsControl ItemsSource="{Binding Items}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas Width="800" Height="480" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl>属性（例如＆＃34; X＆＃34;和＆＃34; Y＆＃34;），以控制对象在画布上的位置。

接下来，为每个类创建一个XAML double，以定义它们的视觉外观。数据模板应包含以下绑定：

DataTemplate

对于属性网格，不要自己编写，请查看免费的Xceed Toolkit社区版（here），它具有非常好的<Setter Property="Canvas.Left" Value="{Binding X}" /> <Setter Property="Canvas.Top" Value="{Binding Y}" />控件。您将其PropertyGrid属性绑定到所选对象，但阅读文档 - 有很多不错的功能。

（如果您正在使用MVVM，请记住更改类以实现SelectedObject，并在setter中引发PropertyChanged事件。）

对于拖放功能，您应该只能在鼠标移动事件中设置所选对象的X和Y值。

我知道这不是一个完整的解决方案，但希望能指出正确的方向。

WPF适应性用户界面

1 个答案: