图像不在中心 XAML UWP

Question

我无法将图像和线条（线条绘制在图像顶​​部）放在网格的第二列（中心列）的中心。我总是让线条和图像左对齐...我几乎尝试了所有方法（horizo​​ntalAlignment="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>

基本上，我需要类似的东西：

此外，我希望图像自动适合列内，这样当我全屏显示时它不会被剪切。

我不明白问题出在哪里。

谢谢

Answer 1

我玩弄了您的代码并进行了一些更改以获得您的线框中显示的内容。图像将始终保持在中心，并会根据窗口大小移动或缩放。

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

        }

    }