簡體   English   中英

在布局Windows Phone的網格內將UserControl居中

[英]Center UserControl within a grid in a Layout Windows Phone

美好的一天,如何將UserControl居中以適合另一個布局中網格的死點。 我創建了一個UserControl,其中心有一個Image Button。 當我嘗試添加此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>

在MainPage.xaml中,您將“ Horizo​​ntalAlignment”設置為左側,而“ VerticalAlignment”則完全沒有設置。 嘗試將兩者都設置為居中。

一些東西。

  • 默認情況下,Grid控件將占用給定的空間。 因此,不要給控件一個想要成為“ FullScreen”的高度/寬度。 只需放置它們,使其不受限制。
  • 默認情況下,網格控件將居中顯示給定的內容。 當放置在控件中的項目的Horizo​​ntalAlignment設置為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>

注意,我剝離了很多東西。 我可以這樣做是因為所使用的控件使操作變得如此簡單!

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM