使用 MVVM 动态创建的 WPF 布局答案

【问题标题】：WPF layout created dynamically using MVVM使用 MVVM 动态创建的 WPF 布局
【发布时间】：2014-10-21 15:04:41
【问题描述】：

我正在尝试在使用 MVVM 模式时将视图定位到布局为矩形的窗口中。

在 WinForms 中，我可以使用矩形的宽度、高度、x 和 y 来轻松定位控件，只需在控件上设置相同的属性。

现在我正在使用 MVVM 将此代码重写为 wpf，但我迷路了。

这就是我想要做的：

我认为这可能有效，但它没有。

<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <ItemsControl ItemsSource="{Binding VirtualScreens}" Grid.IsSharedSizeScope="True" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button Grid.Row="{Binding Row}" Grid.Column="{Binding Column}" Content="{Binding Name}"></Button>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

public class VirtualScreen : ObservableObject
{
    string name;
    int row;
    int column;

    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            RaisePropertyChanged(() => Name);
        }
    }

    public int Row
    {
        get { return row; }
        set
        {
            row = value;
            RaisePropertyChanged(() => Row);
        }
    }

    public int Column
    {
        get { return column; }
        set
        {
            this.column = value;
            RaisePropertyChanged(() => Column);
        }
    }
}

感谢您的任何帮助

【问题讨论】：

抱歉，您需要提供更多详细信息，或者可能是 WinForms 应用程序的屏幕截图，以便我们更好地了解您要完成的工作。
在 StackOverflow 中发布问题之前请阅读 "How To Ask"。
网格可以像这样布置，它们会随着窗口自动调整内容的大小。画布使用 x,y,w,h 坐标系来布局控件，但它们需要您在调整窗口大小时更新布局。在提出问题之前尝试创建一个小型原型，可以防止不必要的否决。

标签： c# wpf layout mvvm rectangles

【解决方案1】：

您可以使用 ItemsControl ItemsPanel、ItemsTemplate 和 ItemContainerStyle。

给你一个例子

<ItemsControl ItemsSource="{Binding VirtualScreens}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>

    <ItemsControl.ItemContainerStyle>
        <Style>
            <Style.Setters>
                <Setter Property="Grid.Row" Value="{Binding Row}" />
                <Setter Property="Grid.Column" Value="{Binding Column}" />
            </Style.Setters>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

【讨论】：

非常感谢，这正是我要找的！

【解决方案2】：

您可以使用 WPF Grid 来布局元素，如 UI 中所示。三行三列的网格很适合您：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition /> 
        <RowDefinition /> 
        <RowDefinition /> 
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
     <Button Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="2">This is the big top left section</Button>
     <Button Grid.Row="1" Grid.Column="2">Top right</Button>
     <Button Grid.Row="2" Grid.Column="2">Middle right</Button>
     <Button Grid.Row="3" Grid.Column="1">Bottom left</Button>
     <Button Grid.Row="3" Grid.Column="2">Bottom center</Button>
     <Button Grid.Row="3" Grid.Column="2">Bottom right</Button>
</Grid>

结帐Grid Row and Column Spanning 了解更多信息。

【讨论】：

这就是我想要使用 MVVM 动态执行的操作。
我不清楚你在问什么。 “动态使用 MVVM” - 你的意思是你想在代码中创建这个布局？