Question

我正在尝试复制这个https://i.stack.imgur.com/WawQc.png，这是一个4 * 11网格的64 * 64按钮，用JavaFX制作，带有WPF

<Window x:Class="Kassa.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Kassa"
        Title="Kassa" Width="1280" Height="720"  Icon="Resources/Kassa.ico" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">

        <Grid ShowGridLines="True" Width="264" Height="720" HorizontalAlignment="Right">
            <Grid.RowDefinitions>
                <RowDefinition Height="64"/>
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                                <RowDefinition Height="64" />

            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="64"/>
                <ColumnDefinition Width="64" />
                <ColumnDefinition Width="64" />
                <ColumnDefinition Width="64" />
            </Grid.ColumnDefinitions>
            <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0" Grid.Row="0" Grid.Column="0" Width="64" Height="64">Kogus</Button>
            <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Grid.Row="10" Grid.Column="3" Width="64" Height="64">Kassa</Button>

        </Grid>


</Window>

无论我尝试什么，它看起来都像https://i.imgur.com/HNBCo3r.png这太可怕了。有没有办法在WPF中创建一个正常的缩放网格，以便正确缩放？谢谢。最少10行......

Answer 1

我建议忽略按钮的像素特性，而是让网格缩放到窗口内的任何大小。然后，您的按钮会自动调整大小以适应您，并且您只需确保在任何时候都有4x11的网格。

类似下面的代码可以获得所需的效果。

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d" Title="Kassa" Width="1280" Height="720" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80*" />
            <ColumnDefinition Width="20*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.Resources>
                <ResourceDictionary>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="BorderThickness" Value="0" />
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="HorizontalAlignment" Value="Stretch"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                    </Style>
                </ResourceDictionary>
            </Grid.Resources>
            <Button Margin="0" Grid.Row="0">Kogus</Button>
            <Button Grid.Row="10" Grid.Column="3">Kassa</Button>
        </Grid>
    </Grid>
</Window>

（编辑：我已将此更新为2面板布局，右侧面板（按钮）始终占用可用空间的20％）

Answer 2

试试这个。您在主widnow上缺少SizeToContent="WidthAndHeight"

如果你想修改宽度和高度并防止用户调整大小，你可以添加这个属性ResizeMode="NoResize"（如果你想在那种情况下也删除滚动查看器，因为如果你阻止调整大小它不会真的需要）

<Window 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="MainWindow" Height="750" Width="300" SizeToContent="WidthAndHeight">
    <ScrollViewer  >
        <Grid ShowGridLines="True" Width="Auto" Height="Auto" HorizontalAlignment="Right">
            <Grid.RowDefinitions>
                <RowDefinition Height="64"/>
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
                <RowDefinition Height="64" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="64" />
                <ColumnDefinition Width="64" />
                <ColumnDefinition Width="64" />
                <ColumnDefinition Width="64" />
            </Grid.ColumnDefinitions>

            <Button Grid.Row="10" Grid.Column="3">TEST</Button>
        </Grid>

    </ScrollViewer>

</Window>

Answer 3

如果希望使用包含窗口拉伸和折叠网格按钮，可以将列宽和高度从“自动”更改为*。

 <Grid x:Name="container" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
        <Button Grid.Row="1" Grid.Column="2" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
        <Button Grid.Row="3" Grid.Column="4" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
        <Button Grid.Row="5" Grid.Column="3" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
        <Button Grid.Row="7" Grid.Column="2" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
        <Button Grid.Row="9" Grid.Column="1" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
        <Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
        <Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>

    </Grid>

WPF网格按钮，非percise行数和均匀间距

3 个答案: