无论窗口大小如何调整，如何保持图像与窗口右侧对齐？答案

【问题标题】：How to keep image aligned to the right of the window regardless of how the window is resized?无论窗口大小如何调整，如何保持图像与窗口右侧对齐？
【发布时间】：2013-10-18 10:05:26
【问题描述】：

问题是图像没有固定在屏幕的右侧，所以当我调整屏幕大小时，图像会离开屏幕，例如：

在该示例中，我们应该看到完整手机的图像。

我定义了以下网格布局：

<Grid Background="White" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="23" />
        <ColumnDefinition Width="166" />
        <ColumnDefinition Width="473" />
        <ColumnDefinition Width="330" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="35" />
        <RowDefinition Height="35" />
        <RowDefinition Height="35" />
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!-- some irrelevant stuff removed -->

    <Canvas Grid.Column="3" HorizontalAlignment="Right" >

        <Image HorizontalAlignment="Left" Name="imgLogo" Stretch="Uniform" VerticalAlignment="Center" Width="45" Height="45" Margin="30,135,0,0" Canvas.ZIndex="99" Canvas.Left="0" Canvas.Top="-7" />
        <Image Source="/Resources/Images/MobileBrandingSample.png" Height="634" Width="316" HorizontalAlignment="Left" Margin="0,14,0,0" Name="imgPhone" Stretch="Uniform" VerticalAlignment="Top"  />
        <Label Canvas.Left="80" Canvas.Top="127" Content="" Height="20" Name="lblCompanyName" Width="169" FontSize="15" Padding="0,0,0,0" />

        <Label Canvas.Left="80" Canvas.Top="150" Height="20" Name="lblPhoneNumber" Width="160" FontSize="12" Padding="0,0,0,0">
            <TextBlock Name="tbPhoneNumberLabel" Text="" TextDecorations="Underline" Foreground="#35B6E5" Width="160"></TextBlock>
        </Label>
    </Canvas>

</Grid>

有了这个，imgPhone 右对齐，但是当我调整窗口大小时，imgPhone 会离开屏幕。无论窗口大小如何调整，我需要什么让imgPhone 停靠在屏幕右侧？

【问题讨论】：

你真的需要使用 Canvas 吗？
我需要保持 imgLogo 和标签绝对位于 imgPhone 上方。这适用于画布。如果有其他更好的方法，我愿意接受建议。
你能贴一张你假装的最终结果的图片吗？我可能错了，但是如果您使用 Grid 并在 Grid.Row=0, Grid.Column=0 中设置 imgPhone 然后将标签设置为相同（Grid.row=0, grid.column=0），它们将重叠图像！
我已经用问题的截图更新了问题。在其中您会看到标签和 imgLogo 填充
你想把手机放在标签和按钮下面吗？

标签： wpf xaml

【解决方案1】：

抛弃画布，使用带有网格的 Dockpanel，将所有内容停靠在正确的位置，网格中的绝对大小将使您相对于其他所有内容保持所需的位置。

【讨论】：

【解决方案2】：

我试过这个......并得到了一个解决方案......也许不完全是你想要的，但我认为你可以进行所需的一些调整。

<Grid Background="White" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="company name"></TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="0" Text="Phone number"></TextBlock>
    <TextBlock Grid.Row="2" Grid.Column="0" Text="Logo name"></TextBlock>
    <Button  Grid.Row="3" Grid.Column="0" Content="Upgrade branding"></Button>

    <TextBox Grid.Row="0" Grid.Column="1"></TextBox>
    <TextBox Grid.Row="1" Grid.Column="1"></TextBox>
    <Button Grid.Row="2" Grid.Column="1" Content="Load logo"></Button>

    <Image Grid.Column="2" Grid.RowSpan="4" HorizontalAlignment="Right" Source="C:\Users\somonteiro\Desktop\Montagens\somonteiro.jpg"></Image>

</Grid>

【讨论】：