如何将图像放置在Grid.Row中但保持其响应性WPF

Question

I'm working on a WPF app and I would like to place a user-icon next to a logged in username. I couldn't make it responsive at all and somehow it looks too large on my window.

This is how it looks in Expression Blend (it looks large even in design mode):

Here is my code:

[TextBlock Text="User"]

[TextBlock Text=" Current username from database " ]

[Rectangle as user icon, Background="Green"]

<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" />

This is how it looks when I run the application (on my 22'' monitor) - really bad:

And this is how it looks when I run it on a smaller monitor like 17'':

How could I make it responsive on every size of screen? On 22'' it looks really bad.

Answer 1

You set the Image to an absolute position, I don't think you understood how the Grid works yet.

Use something like this:

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