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

Question

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

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

我定义了以下网格布局：

<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停靠在屏幕右侧？

Answer 1

抛弃画布，在其中使用带有网格的Dockpanel，将整个画面停靠在一起，网格中的绝对尺寸将使您想要的东西保持在其他所有位置。

Answer 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>