Question

美好的一天，我如何使UserControl居中以适应另一个布局中网格的死点。我在其中心创建了一个带有图像按钮的UserControl。当我尝试添加此UserControl并将其置于另一个布局的gridlayout中时，它会变得非常错位。我怎样才能实现这一目标？..很多谢谢

我的UserControl XAML：

<UserControl x:Class="MyApp.ImageFullScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}" Height="639.848">


        <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,-10" Grid.RowSpan="4">
            <Grid.RowDefinitions>
                <RowDefinition Height="680"/>
            </Grid.RowDefinitions>
            <Canvas x:Name="ViewFinderCanvas" Margin="-12,-12,-471,51">
                <!--Camera viewfinder -->
                <Canvas.Background>
                    <VideoBrush x:Name="cameraviewfinder"/>
                </Canvas.Background>
                <Button x:Name="add_button" Canvas.Left="168" Canvas.Top="282" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.5" RenderTransformOrigin="0.576,-0.098">
                    <Grid>
                        <Image x:Name="AddButtonImage" Source="/Assets/Images/add_button.png"/>
                    </Grid>
                </Button>
            </Canvas>
        </Grid>

</UserControl>

Main_Layout XAML：

     <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"/>
                <ColumnDefinition/>
                <ColumnDefinition Width="40"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="48*"/>
                <RowDefinition Height="680*"/>
                <RowDefinition Height="48*"/>
            </Grid.RowDefinitions>

            <TextBox Grid.Column="1" HorizontalAlignment="Left" Height="62" Grid.Row="2" TextWrapping="Wrap" Text="page" VerticalAlignment="Top" Width="70" Margin="386,0,-17,-14" FontSize="10" Grid.ColumnSpan="2"/>

            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Margin="12,0,12,0" Grid.RowSpan="3"/>


            <Grid Grid.Column="1" HorizontalAlignment="Left" Height="673" Grid.Row="1" VerticalAlignment="Top" Width="400">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

<!--User control here-->
                <local:ImageFullScreen x:Name="ImageFull" Grid.Column="1" Grid.Row="1" Loaded="ImageFullScreen_Loaded" Width="400" HorizontalAlignment="Left" RenderTransformOrigin="0.424,0.481"/>
            </Grid>

        </Grid>

Answer 1

在MainPage.xaml中，您将HorizontalAlignment设置为left，而VerticalAlignment完全没有设置。尝试将两者设置为居中。

Answer 2

一些事情。

默认情况下，Grid控件将占用尽可能多的空间。因此，不要为控件提供希望为“FullScreen”的高度/宽度。只需放置它们就可以没有任何限制。
默认情况下，网格控件将使给定的内容居中。当放置在控件中的项目将HorizontalAlignment设置为Left / Right或VerticalAlignment设置为Top / Bottom
实时网格，Canvas控件将占用尽可能多的空间。

为UserControl尝试以下操作

<UserControl x:Class="MyApp.ImageFullScreen"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}" Height="639.848">

    <Canvas x:Name="ViewFinderCanvas" Margin="10">
        <!--Camera viewfinder -->
        <Canvas.Background>
            <VideoBrush x:Name="cameraviewfinder"/>
        </Canvas.Background>
        <Button x:Name="add_button" Canvas.Left="168" Canvas.Top="282" Opacity="0.5">
            <Image x:Name="AddButtonImage" Source="/Assets/Images/add_button.png"/>
        </Button>
    </Canvas>
</UserControl>

以下是您的页面

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid Background="Transparent">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--User control here-->
    <local:ImageFullScreen x:Name="ImageFull" Loaded="ImageFullScreen_Loaded" 
           Grid.Column="1" Grid.Row="1" Height="673" Width="400"/>
    <TextBox Grid.Column="2" Grid.Row="2" Margin="-10" TextWrapping="Wrap" Text="page" Width="70" FontSize="10" />
</Grid>

请注意我已经剥离了很多。我可以这样做，因为使用的控件使它变得那么容易！

在布局Windows Phone中的网格中居中UserControl

2 个答案: