Image not in center XAML UWP

Question

I'm not able to put my image and lines (the lines are drawn on top of the image) in the center of the 2nd column (the center column) of my grid. I always have lines and image left aligned...I almost tried everything (horizontalAlignment="center"...)

The code is the following:

<Page
x:Class="WhirlpoolSQC.DetailPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WhirlpoolSQC"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0" VerticalAlignment="Top">
        <TextBox x:Name="textBox" Text="Defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
    </StackPanel>

    <Canvas Grid.Column="1" >
        <Image Name="image_detail" VerticalAlignment="Center" Width="840"/>
        <Canvas VerticalAlignment="Center" Width="840" >
            <Line
           X1="280" Y1="0"
           X2="280" Y2="630"
           Stroke="Black"
           StrokeDashArray="2, 5"
           StrokeThickness="3" />
            <Line
           X1="560" Y1="0"
           X2="560" Y2="630"
           Stroke="Black"
           StrokeDashArray="2, 5"
           StrokeThickness="3" />
            <Line
            X1="0" Y1="210"
            X2="840" Y2="210"
            Stroke="Black"
            StrokeDashArray="2, 5"
            StrokeThickness="3"/>
            <Line
            X1="0" Y1="420"
            X2="840" Y2="420"
            Stroke="Black"
            StrokeDashArray="2, 5"
            StrokeThickness="3"/>
        </Canvas>
    </Canvas>

    <StackPanel Grid.Column="2" VerticalAlignment="Top">
        <TextBox x:Name="textBox2" Text="List of defecs" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="24" IsReadOnly="True"/>
        <ListView x:Name="listView" HorizontalAlignment="Stretch" Margin="0,61,10,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Top" Height="536"/>
    </StackPanel>


</Grid>

Basically, I need something like:

Furthermore, I would like that the image auto fit inside the column in a way that it is not cutted when I put full-screen.

I don't understand wherte is the isse.

thanks

Answer 1

I played around your code and made some changes to get what's shown in your wireframe. The image will always stay in the center and will move or scale according to the window size.

Desktop View

Mobile or Tablet View

//MainPage.Xaml

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="YourPage_SizeChanged"
x:Name="YourPage"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Padding="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" MaxWidth="200" />
        <ColumnDefinition Width="4*" />
        <ColumnDefinition Width="1*" MaxWidth="200" />
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0" VerticalAlignment="Top" Padding="20">
        <TextBlock x:Name="textBox1" Text="List of Affects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  Foreground="Blue" />
        <ListView x:Name="listView1" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
            <ListViewItem>Item1</ListViewItem>
            <ListViewItem>Item2</ListViewItem>
            <ListViewItem>Item3</ListViewItem>
        </ListView>

    </StackPanel>

    <Grid Grid.Column="1" Padding="0" VerticalAlignment="Center" Background="White" HorizontalAlignment="Center"  >
        <Image Name="image_detail" MaxWidth="840"  Source="ms-appx:///Assets/1.jpg" />
        <Line x:Name="Line1"
       X1="280" Y1="0"
       X2="280" Y2="630"
       Stroke="Black"
       StrokeDashArray="2, 5"
       StrokeThickness="3" />
        <Line x:Name="Line2"
       X1="560" Y1="0"
       X2="560" Y2="630"
       Stroke="Black"
       StrokeDashArray="2, 5"
       StrokeThickness="3" />
        <Line x:Name="Line3"
        X1="0" Y1="210"
        X2="840" Y2="210"
        Stroke="Black"
        StrokeDashArray="2, 5"
        StrokeThickness="3"/>
        <Line x:Name="Line4"
        X1="0" Y1="420"
        X2="840" Y2="420"
        Stroke="Black"
        StrokeDashArray="2, 5"
        StrokeThickness="3"/>
    </Grid>

    <StackPanel Grid.Column="2" VerticalAlignment="Top" Padding="20">
        <TextBlock x:Name="textBox2" Text="List of defects" Margin="0,11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"  Foreground="Blue" />
        <ListView x:Name="listView2" HorizontalAlignment="Stretch" Margin="0,40,0,0" BorderThickness="1,1,1,1" RequestedTheme="Default" BorderBrush="Black" VerticalAlignment="Stretch" >
            <ListViewItem>Item1</ListViewItem>
            <ListViewItem>Item2</ListViewItem>
            <ListViewItem>Item3</ListViewItem>
        </ListView>
    </StackPanel>
</Grid>

//MainPage.Xaml.cs

 public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

        }


        private void YourPage_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            try
            {if (image_detail.ActualHeight > 0 && image_detail.ActualWidth > 0)
                {

                    Line1.Y2 = image_detail.ActualHeight;
                    Line1.X1 = image_detail.ActualWidth / 3;
                    Line1.X2 = image_detail.ActualWidth / 3;
                    Line2.Y2 = image_detail.ActualHeight;
                    Line2.X1 = (image_detail.ActualWidth / 3) * 2;
                    Line2.X2 = (image_detail.ActualWidth / 3) * 2;
                    Line3.X2 = image_detail.ActualWidth;
                    Line3.Y1 = image_detail.ActualHeight / 3;
                    Line3.Y2 = image_detail.ActualHeight / 3;
                    Line4.X2 = image_detail.ActualWidth;
                    Line4.Y1 = (image_detail.ActualHeight / 3) * 2;
                    Line4.Y2 = (image_detail.ActualHeight / 3) * 2;
                }
            }
            catch { }

        }

    }