基于xaml的wpfgui设计_Wpf_Xaml - Fatal编程技术网

基于xaml的wpfgui设计

wpf xaml

基于xaml的wpfgui设计,wpf,xaml,Wpf,Xaml,我是XAML的新手，所以我不知道如何正确操作。我的设计应该在顶部有一个菜单栏（100%宽度），然后是另一个在左边有一个按钮的栏，在右边有一个（100%宽度），然后它应该是左边的一个侧栏（大约100px），其余的应该是“内容”，所以我想在那里放置我的控件（按钮、列表视图、网格、lkab）我的代码看起来不错，但是边栏应该在包含两个dockpanel的dockpanel下面我的纽扣你好我想你误解了DockPanel.Dock的工作原理它可以进入任何UIElement，然后将在第一个父

我是XAML的新手，所以我不知道如何正确操作。我的设计应该在顶部有一个菜单栏（100%宽度），然后是另一个在左边有一个按钮的栏，在右边有一个（100%宽度），然后它应该是左边的一个侧栏（大约100px），其余的应该是“内容”，所以我想在那里放置我的控件（按钮、列表视图、网格、lkab）

我的代码看起来不错，但是边栏应该在包含两个dockpanel的dockpanel下面


我的纽扣
你好

我想你误解了

DockPanel.Dock

的工作原理

它可以进入任何UIElement，然后将在第一个父级中设置dock，这是一个dock panel，因此您不需要使用一半的dock panel，请尝试此操作

<Window Background="#f5f5f5" Width="1280" Height="800" x:Class="WpfApplication3.MainWindow"
    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"
    xmlns:local="clr-namespace:WpfApplication3"
    mc:Ignorable="d"
    Title="primoxx">
    <DockPanel >
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_Datei" />
            <MenuItem Header="_Bearbeiten" />
            <MenuItem Header="_Verwaltung" />
            <MenuItem Header="_Vorlagen" />
            <MenuItem Header="_Gestaltung" />
            <MenuItem Header="_Extras" />
            <MenuItem Header="_Hilfe" />
        </Menu>
        <!--if you want to have both buttons on 50% width-->
        <UniformGrid DockPanel.Dock="Top" Columns="2">
            <Button DockPanel.Dock="Left">Hello</Button>
            <Button DockPanel.Dock="Right" Height="30px">My Button</Button>
        </UniformGrid>
        <!--if you want to have both buttons on auto size -->
        <DockPanel LastChildFill="False" DockPanel.Dock="Top">
            <Button DockPanel.Dock="Left">Hello</Button>
            <Button DockPanel.Dock="Right" Height="30px">My Button</Button>
        </DockPanel>
        <StackPanel DockPanel.Dock="Left" Background="blue" MinWidth="100"/>
        <ContentControl  />
    </DockPanel>
</Window>


你好
我的纽扣
你好
我的纽扣

注意：我已将侧面板涂成蓝色，以便您可以看到它

我认为您误解了

DockPanel.Dock

的工作原理

它可以进入任何UIElement，然后将在第一个父级中设置dock，这是一个dock panel，因此您不需要使用一半的dock panel，请尝试此操作

<Window Background="#f5f5f5" Width="1280" Height="800" x:Class="WpfApplication3.MainWindow"
    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"
    xmlns:local="clr-namespace:WpfApplication3"
    mc:Ignorable="d"
    Title="primoxx">
    <DockPanel >
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_Datei" />
            <MenuItem Header="_Bearbeiten" />
            <MenuItem Header="_Verwaltung" />
            <MenuItem Header="_Vorlagen" />
            <MenuItem Header="_Gestaltung" />
            <MenuItem Header="_Extras" />
            <MenuItem Header="_Hilfe" />
        </Menu>
        <!--if you want to have both buttons on 50% width-->
        <UniformGrid DockPanel.Dock="Top" Columns="2">
            <Button DockPanel.Dock="Left">Hello</Button>
            <Button DockPanel.Dock="Right" Height="30px">My Button</Button>
        </UniformGrid>
        <!--if you want to have both buttons on auto size -->
        <DockPanel LastChildFill="False" DockPanel.Dock="Top">
            <Button DockPanel.Dock="Left">Hello</Button>
            <Button DockPanel.Dock="Right" Height="30px">My Button</Button>
        </DockPanel>
        <StackPanel DockPanel.Dock="Left" Background="blue" MinWidth="100"/>
        <ContentControl  />
    </DockPanel>
</Window>


你好
我的纽扣
你好
我的纽扣

注意：我已将侧面板涂成蓝色，以便您可以看到它。

网格面板定义了一个灵活的网格区域，该区域由列和行组成，在这里非常有用：

您可以为网格中所需的每一行添加行定义，为每一列添加列定义，然后设置网格中每个元素的Grid.row/Grid.column附加属性，以确定其在同一行中的位置。通过分别设置Grid.ColumnSpan和Grid.RowSpan属性，元素可以跨多个列或行。下面的示例标记应该能让您了解这一点：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <!-- first row, the Menu spans both columns -->
    <Menu Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
        <MenuItem Header="_Datei" />
        <MenuItem Header="_Bearbeiten" />
        <MenuItem Header="_Verwaltung" />
        <MenuItem Header="_Vorlagen" />
        <MenuItem Header="_Gestaltung" />
        <MenuItem Header="_Extras" />
        <MenuItem Header="_Hilfe" />
    </Menu>
    <!-- the bar with one button to the left and another one to the right-->
    <Button Content="Left" Grid.Column="0" Grid.Row="1" />
    <Button Content="Right" Grid.Column="1" Grid.Row="1" />

    <Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border Background="Silver" Grid.Column="0">
            <!-- Sidebar-->
        </Border>
        <Border Background="Yellow" Grid.Column="1">
            <!-- The Content-->
        </Border>
    </Grid>
</Grid>

网格面板定义了一个灵活的网格区域，该区域由列和行组成，在这里非常有用：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <!-- first row, the Menu spans both columns -->
    <Menu Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
        <MenuItem Header="_Datei" />
        <MenuItem Header="_Bearbeiten" />
        <MenuItem Header="_Verwaltung" />
        <MenuItem Header="_Vorlagen" />
        <MenuItem Header="_Gestaltung" />
        <MenuItem Header="_Extras" />
        <MenuItem Header="_Hilfe" />
    </Menu>
    <!-- the bar with one button to the left and another one to the right-->
    <Button Content="Left" Grid.Column="0" Grid.Row="1" />
    <Button Content="Right" Grid.Column="1" Grid.Row="1" />

    <Grid Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border Background="Silver" Grid.Column="0">
            <!-- Sidebar-->
        </Border>
        <Border Background="Yellow" Grid.Column="1">
            <!-- The Content-->
        </Border>
    </Grid>
</Grid>

您可能希望将

网格

与

行

和

列

一起使用，而不是

DockPanel

设置

Grid.Row=“1”

对您没有任何作用，除非您实际在网格上定义了一些行。您可能希望使用

网格

与

行

和

列

而不是

DockPanel

设置

网格。Row=“1”

对您没有任何作用，除非您实际在网格上定义了一些行。