Изображение не в центре XAML UWP

Question

Я не могу поместить свое изображение и линии (линии нарисованы поверх изображения) в центре 2-го столбца (центральный столбец) моей сетки.У меня всегда строки и изображение выровнены по левому краю ... Я почти все перепробовал (horizontalAlignment = "center" ...)

Код следующий:

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

В основном мне нужно что-то вроде:

Кроме того, я хотел бы, чтобы изображение автоматически помещалось внутри столбца таким образом, чтобы оно невырезано, когда я ставлю полный экран.

Я не понимаю, wherte это isse.

спасибо

Answer 1

Я поэкспериментировал с вашим кодом и внес некоторые изменения, чтобы получить то, что показано на вашем каркасе.Изображение всегда будет оставаться в центре и будет перемещаться или масштабироваться в соответствии с размером окна.

Рабочий стол

Мобильный или планшетный

// 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 { }

        }

    }