如何將圖像放置在Grid.Row中但保持其響應性WPF

Question

我正在使用WPF應用程序，我想在登錄的用戶名旁邊放置一個用戶圖標。 我根本無法使其具有響應能力，並且以某種方式使其在我的窗口中顯得太大。

這是在Expression Blend中的外觀（即使在設計模式下也看起來很大）：

這是我的代碼：

[TextBlock Text =“ User”]

[TextBlock Text =“ 數據庫 “中的當前用戶名 ”

[作為用戶圖標的矩形，背景=“綠色”]

<TextBlock Grid.Row="3"
           Margin="5,5,34,0"
           x:Name="lblUser"
           VerticalAlignment="Top"
           Text="User:"
           Foreground="White"
           FontSize="13"
           d:LayoutOverrides="GridBox" />
<Rectangle Stroke="#83D744"
           Grid.Row="3"
           RadiusX="0"
           RadiusY="0"
           Margin="6,24.69,34,10"
           d:LayoutOverrides="GridBox">
    <Rectangle.Fill>
        <SolidColorBrush Color="#5000" />
    </Rectangle.Fill>
</Rectangle>
<Image Name="imgExit"
       Grid.Row="3"
       Source="/MyDesktopApp;component/Images/user-icon.png"
       HorizontalAlignment="Left"
       MaxHeight="35"
       MaxWidth="35"
       Margin="15,5,0,10"
       VerticalAlignment="Bottom" />
<TextBlock Foreground="White"
           Margin="8,40,34,4"
           x:Name="lblLoggedInUser"
           Grid.Row="3"
           FontSize="17"
           FontWeight="Bold"
           Text=""
           TextAlignment="Right" />

這是我在22英寸顯示器上運行應用程序時的外觀-真的很糟糕：

這是我在類似17英寸的較小顯示器上運行時的外觀：

如何在各種尺寸的屏幕上做出響應？ 在22英寸上看起來真的很糟糕。

Answer 1

您將Image設置為絕對位置，我認為您還不了解Grid的工作原理。

使用這樣的東西：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*"
                       MinHeight="80" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0"
               Text="User" />
    <Border Grid.Row="1"
            Padding="8"
            BorderBrush="Green"
            BorderThickness="2">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"
                                  MinWidth="80" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="***" Stretch=""Fill/UniformToFill />
            <TextBlock Grid.Column="1"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       Text="Admin" />
        </Grid>
    </Border>
</Grid>