1

美好的一天，我如何将用户控件居中以适应另一个布局中网格的死点。我在其中心创建了一个带有图像按钮的用户控件。当我尝试添加此 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>
4

2 回答 2

0

在 MainPage.xaml 中，Horizo​​ntalAlignment 设置为 left，而 VerticalAlignment 根本没有设置。尝试将两者都设置为中心。

于 2013-06-11T12:18:28.250 回答
0

一些东西。

  • 默认情况下，Grid 控件将占用给定的空间。因此，不要为控件提供您希望成为“全屏”的高度/宽度。简单地放置它们，这样它们就没有限制。
  • 默认情况下，Grid 控件将其提供的内容居中。当放置在控件中的项目的 Horizo​​ntalAlignment 设置为 Left/Right 或 VerticalAlignment 设置为 Top/Bottom 时，这会发生变化
  • Live the Grid，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>

请注意，我剥离了很多。我可以做到这一点，因为正在使用的控件使它变得如此简单！

于 2013-06-13T06:14:31.703 回答