Center UserControl within a grid in a Layout Windows Phone

Question

Good day, How can i center a UserControl to fit dead center of a grid in another Layout. I have created a UserControl with an Image Button in its center. when i try to add this UserControl and center it in a gridlayout in another layout, it becomes very mis-aligned. How can i achieve this?.. ManyThanks

My 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

In your MainPage.xaml, you have the HorizontalAlignment set to left and the VerticalAlignment not set at all. Try setting both to center.

Answer 2

A few things.

• By default the Grid control will take up as much space as it is given. Because of this do not give controls a Height/Width that you want to be "FullScreen". Simply place them so they have no restrictions.
• By default the Grid control will center the content it is given. This changes when items placed in the control have a HorizontalAlignment set to Left/Right or a VerticalAlignment set to Top/Bottom
• Live the Grid, the Canvas control will take up as much space as it is given.

Try the following for your 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>

And the following for your Page

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

Notice that I stripped a lot out. I can do this because the controls being used make it that easy!