UWP Moving Childs to Other Parent Problems

Question

First of all I am new to UWP and I have already searched almost everywhere (using Google and Stackoverflow) for the answer but couldn't find the answer for my problem.

So, Here is the problem:

I planned to create a pixel paint app that has tab function like Edge (utilizing title bar) for UWP using Visual Studio 2017 and Target Sdk: Creators Update.

I wanted to move the custom title bar I made to the content view when the app in fullscreen condition.

I wanted to move from here (windows title bar, this is just the button XAML code, I'm not including the tab bar XAML code because it's a commercial project):

<Grid x:Name="btnMenuPlace1" Grid.Column="0">
    <Grid x:Name="btnMenuPlaceContent" Background="{StaticResource SystemControlHighlightListAccentMediumBrush}">
    <Button x:Name="btnMenu" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
Width="50" Height="50" Background="Transparent" Click="btnMenu_Click"/>
    </Grid>
</Grid>

To here (user view):

<Grid x:Name="btnMenuPlace2" Grid.Column="0">
</Grid>

Both parent of those Grid is an another Grid using Grid.ColumnDefinitions like this:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

And here's my C# Code:

private void WindowSizeChanged(object sender, WindowSizeChangedEventArgs e)
{
    var appView = ApplicationView.GetForCurrentView();
    if (appView.IsFullScreenMode)
    {
        Utility.RemoveChild(btnMenuPlaceContent);
        btnMenuPlace2.Children.Add(btnMenuPlaceContent);
        Utility.RemoveChild(tabBarPlaceContent);
        tabBarPlace2.Children.Add(tabBarPlaceContent);
    }
    else
    {
        Utility.RemoveChild(btnMenuPlaceContent);
        btnMenuPlace1.Children.Add(btnMenuPlaceContent);
        Utility.RemoveChild(tabBarPlaceContent);
        tabBarPlace1.Children.Add(tabBarPlaceContent);
    }
    e.Handled = true;
}

And here is my Utility RemoveChild Code:

public static void RemoveChild(DependencyObject parent, UIElement child)
{
    var parentAsPanel = VisualTreeHelper.GetParent(child);
    if (parentAsPanel != null)
    {
        parentAsPanel.Children.Remove(child);
        return;
    }
    var parentAsContentPresenter = parent as ContentPresenter;
    if (parentAsContentPresenter != null)
    {
        if (parentAsContentPresenter.Content == child)
        {
            parentAsContentPresenter.Content = null;
        }
        return;
    }
    var parentAsContentControl = parent as ContentControl;
    if (parentAsContentControl != null)
    {
        if (parentAsContentControl.Content == child)
        {
            parentAsContentControl.Content = null;
        }
        return;
    }
}

This is my app looks like before entered the fullscreen mode:

So the problem is whenever the app entered the fullscreen mode, the child does move to the new parent, but the button is not there only the background color of the grid remaining and I can't click any of them (not a single click event work), take a look:

And when I switched back to not fullscreen view the proggressbar loading on the new tab not shown. I don't know which one I did was wrong XAML or the C# code.

Any help would be appreciated.

P.S. I'm Indonesian, so maybe there is something wrong with my sentence, hopefully You are understand what I'm talking about.

Answer 1

Sorry it was My mistake, that above code I post is actually working (just some of the code wrongly copied, like for example the parameter on the utility code is not necessary).

The false is on it's parent, i forgot to add row definition on the second place (btnPlace2) parent.

Now it works and looks great now :)

Here is some picture of em:

On FullScreen Mode:

Thanks to anyone answering and voting this question up.

Best regards,

andr33ww

Answer 2

There are somethings wrong with your code snippet. For example, RemoveChild method has two parameters but you only provide one when you invoking it. And without assign the parentAsPanel variable type, you cannot get the Children property.

Since the code is not completed, after code updated and add some other code needed I can run your code snippet correctly and cannot reproduce the issue above. Here is my completed testing code:

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <Grid x:Name="btnMenuPlace1" Grid.Column="0" Grid.Row="0">
            <Grid x:Name="btnMenuPlaceContent" Background="{StaticResource SystemControlHighlightListAccentMediumBrush}">
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="btnMenu" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Width="50" Height="50" Background="Transparent"  />
                    <!--<local:CustomTitleBar Width="200" Height="50"></local:CustomTitleBar>-->
                </StackPanel>
            </Grid>
        </Grid>
        <Grid x:Name="btnMenuPlace2" Grid.Column="1" Grid.Row="1"/>
        <TextBlock Text="text" x:Name="txtresult"></TextBlock>
        <Button x:Name="ToggleFullScreenModeButton" Margin="0,10,0,0" Click="ToggleFullScreenModeButton_Click">
            <SymbolIcon x:Name="ToggleFullScreenModeSymbol" Symbol="FullScreen" />
        </Button>
    </StackPanel> 
</Grid>

Code behind

public sealed partial class MainPage : Page
{
   public MainPage()
   {
       this.InitializeComponent();
       CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
       Window.Current.SetTitleBar(btnMenuPlace1);
       Window.Current.SizeChanged += Current_SizeChanged;
   }

   private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
   {
       var appView = ApplicationView.GetForCurrentView();
       if (appView.IsFullScreenMode)
       { 
           RemoveChild(btnMenuPlace1, btnMenuPlaceContent);
           btnMenuPlace2.Children.Add(btnMenuPlaceContent);            
       }
       else
       {
           RemoveChild(btnMenuPlace2, btnMenuPlaceContent);             
           btnMenuPlace1.Children.Add(btnMenuPlaceContent);
       }
       e.Handled = true;
   }

   public void RemoveChild(DependencyObject parent, UIElement child)
   {
       Grid parentAsPanel = VisualTreeHelper.GetParent(child) as Grid;
       if (parentAsPanel != null)
       {                
           parentAsPanel.Children.Remove(child);
           return;
       }
       var parentAsContentPresenter = parent as ContentPresenter;
       if (parentAsContentPresenter != null)
       {
           if (parentAsContentPresenter.Content == child)
           {
               parentAsContentPresenter.Content = null;
           }
           return;
       }
       var parentAsContentControl = parent as ContentControl;
       if (parentAsContentControl != null)
       {
           if (parentAsContentControl.Content == child)
           {
               parentAsContentControl.Content = null;
           }
           return;
       }
   }     

   private void ToggleFullScreenModeButton_Click(object sender, RoutedEventArgs e)
   {
       var view = ApplicationView.GetForCurrentView();
       if (view.IsFullScreenMode)
       {
           view.ExitFullScreenMode();                
       }
       else
       {
           if (view.TryEnterFullScreenMode())
           {
               txtresult.Text = "full screen";
           }
           else
           {
               txtresult.Text = "no full screen";
           }
       }
   }
}

My testing environment is OS build 15063. If you still have issues please provide the minimal reproduced project. You may just try to reproduce the issue on my testing demo. More details please reference the official sample.