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

Question

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

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

将不胜感激。

Chris

我的 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

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

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

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

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

编辑

<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 进行良好的缩放，但也可以将其删除，

如果您想对我的答案说些什么，请添加它。作为对我的答案的评论，如果您想添加到您的问题，请编辑问题。