locked
Remove TabbedPage Padding on UWP Xamarin Forms RRS feed

  • Question

  • User249259 posted

    Hello, when I build my Solution, the UWP version adds automaticaly a padding to the child page. I tried a lot of things but I could take out that padding.

    Thanks

    Monday, August 15, 2016 3:38 PM

Answers

  • User76049 posted

    @Hiroki4505

    I managed this by modifying the base style & a custom renderer (if you want to disable the swipe gesture).

    ``` using Foobar.CustomRenderers; using Foobar.UWP.Renderers; using Xamarin.Forms.Platform.UWP;

    [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace Foobar.UWP.Renderers { public class CustomTabbedPageRenderer : TabbedPageRenderer {

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
    
            if (Control != null)
                Control.Loaded += Control_Loaded;
    
            if (e.OldElement == null) return;
    
            // Unhook when disposing control
            if (Control != null) Control.Loaded -= Control_Loaded;
        }
    
        private void Control_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // Disable UWP swipe gesture on tabbled page
            if (Control.ItemsPanelRoot != null)
                Control.ItemsPanelRoot.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.None;
        }
    }
    

    } ``` And in your App.xaml in your UWP project.

    <Style TargetType="PivotItem"> <Setter Property="Background" Value="Transparent" /> <!--<Setter Property="Margin" Value="{ThemeResource PivotItemMargin}"/>--> <Setter Property="Margin" Value="0,0,0,0"/> <Setter Property="Padding" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PivotItem"> <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="Pivot"> <VisualState x:Name="Right" /> <VisualState x:Name="Left" /> <VisualState x:Name="Center" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

    If you find any weirdness with the workaround and fix it then please update the thread.

    Thanks.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, August 15, 2016 4:37 PM

All replies

  • User98308 posted

    you might need a custom renderer. See http://forums.xamarin.com/discussion/comment/215255#Comment_215255 to get you started

    Monday, August 15, 2016 4:20 PM
  • User76049 posted

    @Hiroki4505

    I managed this by modifying the base style & a custom renderer (if you want to disable the swipe gesture).

    ``` using Foobar.CustomRenderers; using Foobar.UWP.Renderers; using Xamarin.Forms.Platform.UWP;

    [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace Foobar.UWP.Renderers { public class CustomTabbedPageRenderer : TabbedPageRenderer {

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
    
            if (Control != null)
                Control.Loaded += Control_Loaded;
    
            if (e.OldElement == null) return;
    
            // Unhook when disposing control
            if (Control != null) Control.Loaded -= Control_Loaded;
        }
    
        private void Control_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // Disable UWP swipe gesture on tabbled page
            if (Control.ItemsPanelRoot != null)
                Control.ItemsPanelRoot.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.None;
        }
    }
    

    } ``` And in your App.xaml in your UWP project.

    <Style TargetType="PivotItem"> <Setter Property="Background" Value="Transparent" /> <!--<Setter Property="Margin" Value="{ThemeResource PivotItemMargin}"/>--> <Setter Property="Margin" Value="0,0,0,0"/> <Setter Property="Padding" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PivotItem"> <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="Pivot"> <VisualState x:Name="Right" /> <VisualState x:Name="Left" /> <VisualState x:Name="Center" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

    If you find any weirdness with the workaround and fix it then please update the thread.

    Thanks.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, August 15, 2016 4:37 PM
  • User251004 posted

    @NMackay said: @Hiroki4505

    I managed this by modifying the base style & a custom renderer (if you want to disable the swipe gesture).

    ``` using Foobar.CustomRenderers; using Foobar.UWP.Renderers; using Xamarin.Forms.Platform.UWP;

    [assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))] namespace Foobar.UWP.Renderers { public class CustomTabbedPageRenderer : TabbedPageRenderer {

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
    
            if (Control != null)
                Control.Loaded += Control_Loaded;
    
            if (e.OldElement == null) return;
    
            // Unhook when disposing control
            if (Control != null) Control.Loaded -= Control_Loaded;
        }
    
        private void Control_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            // Disable UWP swipe gesture on tabbled page
            if (Control.ItemsPanelRoot != null)
                Control.ItemsPanelRoot.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.None;
        }
    }
    

    } ``` And in your App.xaml in your UWP project.

    <Style TargetType="PivotItem"> <Setter Property="Background" Value="Transparent" /> <!--<Setter Property="Margin" Value="{ThemeResource PivotItemMargin}"/>--> <Setter Property="Margin" Value="0,0,0,0"/> <Setter Property="Padding" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="PivotItem"> <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="Pivot"> <VisualState x:Name="Right" /> <VisualState x:Name="Left" /> <VisualState x:Name="Center" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

    If you find any weirdness with the workaround and fix it then please update the thread.

    Thanks.

    In my App.xaml page, there is already a root element <Application></Application>. And placing the <Style></Style> tags inside of the <Application></Application> tags gives an error, so where should the <Style></Style> tags go? Thanks

    Edit: Nevermind, I just placed <Application.Resources></Application.Resources> in the <Application></Application> tags, and then placed the <Style></Style> tags within the <Application.Resources></Application.Resources> tags

    Thursday, November 3, 2016 4:46 PM
  • User76049 posted

    Are you updating the App.xaml in your PCL instead of the App.xaml in UWP?

    In UWP:

    <Application x:Class="MyApp.UWP.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" RequestedTheme="Dark"> <Application.Resources> <Style TargetType="PivotItem"> ... </Style> </Application.Resources> </Application>

    Thursday, November 3, 2016 4:51 PM
  • User251004 posted

    @NMackay

    Yeah, I was just missing the Application.Resources tags. I think I have a problem of asking questions first, then googling. Should be the opposite haha.

    Thursday, November 3, 2016 5:04 PM
  • User294041 posted

    Would this qualify as a bug that should be fixed in Xamarin Forms?

    @NMackay, thanks for this fix. For me, I think just setting the margin to 0 fixed the issue. Do you remember what your reason was for including all of the other properties?

    Saturday, February 25, 2017 5:09 AM
  • User271938 posted

    I just encountered this problem myself. A shout-out of thanks to @NMackay for a terrific solution!!!

    I agree with @EliBlack - this seems like a bug. Didn't see anything about it in Bugzilla. Anyone aware whether the Xamarin folks are aware of this?

    Friday, July 21, 2017 8:27 PM
  • User271938 posted

    I filed a bug report on this: https://bugzilla.xamarin.com/show_bug.cgi?id=58324

    Sunday, July 23, 2017 6:16 PM
  • User364864 posted

    Old discussion but I landed on it today when searching for this same issue.

    The above bug report has a comment which solved this for me:

    This is actually the Margin from the native UWP PivotItem control and not any space that Xamarin.Forms is adding. You can define an implicit style in the UWP project's App.xaml file to remove it:

       <Application.Resources>
           <Style TargetType="PivotItem">
               <Setter Property="Margin" Value="0" />
           </Style>
       </Application.Resources>
    

    Hope this helps!

    Forgive the strange formatting of the quote above. I couldn't figure out how to do it right.... Very annoying.

    Thursday, March 19, 2020 2:22 PM
  • User357442 posted

    @stuart_A said: Old discussion but I landed on it today when searching for this same issue.

    The above bug report has a comment which solved this for me:

    This is actually the Margin from the native UWP PivotItem control and not any space that Xamarin.Forms is adding. You can define an implicit style in the UWP project's App.xaml file to remove it:

       <Application.Resources>
           <Style TargetType="PivotItem">
               <Setter Property="Margin" Value="0" />
           </Style>
       </Application.Resources>
    

    Hope this helps!

    Forgive the strange formatting of the quote above. I couldn't figure out how to do it right.... Very annoying.

    @stuart_A said: Old discussion but I landed on it today when searching for this same issue.

    The above bug report has a comment which solved this for me:

    This is actually the Margin from the native UWP PivotItem control and not any space that Xamarin.Forms is adding. You can define an implicit style in the UWP project's App.xaml file to remove it:

       <Application.Resources>
           <Style TargetType="PivotItem">
               <Setter Property="Margin" Value="0" />
           </Style>
       </Application.Resources>
    

    Hope this helps!

    Forgive the strange formatting of the quote above. I couldn't figure out how to do it right.... Very annoying.

    Simple & works

    Friday, June 19, 2020 9:46 PM
  • User228226 posted

    Small point, I didn't read everything and had trouble with the above..

    Just to clarify (even though stated previously) this CAN'T be placed in the Xamarin Forms App.xaml, it MUST be placed in the Windows UWP project App.xaml - Xamarin Forms doesn't know what a PivotTable is

    Wednesday, September 23, 2020 8:39 PM