WPF - 运行时图像上的按钮移动

Question

我有一个程序可以显示一个包含图像和 3 个按钮的网格。按钮已在 Visual Studio 设计器中调整大小以适合单独的圆圈（每个圆圈的直径约为 1/4"）。当我运行程序时，每个按钮都向下和向右移动大约 1/2 的宽度按钮。如果我为每个按钮添加明确的宽度和高度，我可以保持大小相同，但按钮仍会略微向右移动，甚至可能会略微向下移动。

我的猜测是，它与 Windows 如何显示适合屏幕的图像有关，并且此缩放/定位尚未应用于按钮。如果是这样，我不知道如何纠正这个问题。

任何关于如何纠正此问题的想法将不胜感激。

克里斯

我的 XAML 代码：

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow"

    Height="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height}"

    Width="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Width}"

    WindowStartupLocation="CenterScreen"

    Background="CornflowerBlue"

    ResizeMode="CanMinimize"

    >

<Window.Resources>

    <Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">

        <Setter Property="Background" Value="Black"/>

        <Setter Property="Opacity" Value="1"/>

        <Style.Triggers>

            <Trigger Property="IsMouseOver" Value="True">

                <Setter Property="Cursor" Value="Hand"/>

            </Trigger>

        </Style.Triggers>

     </Style>

</Window.Resources>

<Grid Name="grid1">

    <Image Name="image" Source="D:\CEP\Image1.jpg" Stretch="Uniform">

    </Image>

    <Button Margin="494,0,1155,801" Click="button_407_Click"></Button>

    <Button Margin="339,107,1310,856" />

    <Button Margin="401,102,1248,860" />

</Grid>

Answer 1

将 Image 的 Stretch 属性设置为 None 以防止调整图像大小。

您已通过设置边距来定位按钮。调整窗口大小后，它们的位置和大小就会改变。

在网格中添加一个画布，并使用绝对定位将图像和按钮放在画布上（Canvas.Left="..." Canvas.Top="..."

如果在执行此操作后，您不喜欢结果，因为您仍想调整图像大小并同步移动按钮，您可以将 Canvas 包裹在 ViewBox 中以使其缩放。

编辑

<Grid>
    <Viewbox>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Source="Images\wp_1680.jpg" Width="300" Height="200" 
                    HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <Canvas Width="300" Height="200"
                    HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button Canvas.Top="25" Canvas.Left="50" Content="OK"/>
                <Button Canvas.Top="125" Canvas.Left="150" Content="Cancel"/>
            </Canvas>
        </Grid>
    </Viewbox>
</Grid>

此解决方案包括通过 Viewbox 进行很好的缩放，但也可以将其移除。

请整理您的所有帖子。如果您想对我的回答发表评论，请将其添加为我的回答的评论，如果您想添加到您的问题中，请编辑问题。