Forum Xamarin.Forms

Announcement:

The Xamarin Forums have officially moved to the new Microsoft Q&A experience. Microsoft Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

To create new threads and ask questions head over to Microsoft Q&A for .NET and get involved today.

[UWP] How to remove right margin from tabbed pages?

Goutham_HasProblemsGoutham_HasProblems Member ✭✭✭
edited September 2020 in Xamarin.Forms

I followed the answer provided here https://forums.xamarin.com/discussion/73426/remove-tabbedpage-padding-on-uwp-xamarin-forms to remove margins from tabbed page. But, now there seems to be margin added only on the right side of the page. Or maybe it is just left aligned?

This is my style:

<Style TargetType="PivotItem">
            <Setter Property="Background" Value="{ThemeResource PivotItemBackground}" />
            <!--<Setter Property="Margin" Value="{ThemeResource PivotItemMargin}" />-->
            <Setter Property="Margin" Value="0,0,0,0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="PivotItem">
                        <Grid Background="{TemplateBinding Background}" HorizontalAlignment="Center" 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>

@NMackay , could you help me with this problem?

Best Answer

Answers

  • NMackayNMackay GBInsider, University admin

    @Goutham_HasProblems said:
    I followed the answer provided here https://forums.xamarin.com/discussion/73426/remove-tabbedpage-padding-on-uwp-xamarin-forms to remove margins from tabbed page. But, now there seems to be margin added only on the right side of the page. Or maybe it is just left aligned?

    This is my style:

    <Style TargetType="PivotItem">
                <Setter Property="Background" Value="{ThemeResource PivotItemBackground}" />
                <!--<Setter Property="Margin" Value="{ThemeResource PivotItemMargin}" />-->
                <Setter Property="Margin" Value="0,0,0,0" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="HorizontalContentAlignment" Value="Center" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="PivotItem">
                            <Grid Background="{TemplateBinding Background}" HorizontalAlignment="Center" 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>
    

    @NMackay , could you help me with this problem?

    Try the suggested fix, I posted that ages ago and many UWP SDK's have passed since so the overridden style might be wrong. You can find the SDK styles in the SDK directory, can't remember the full path.

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    @Goutham_HasProblems

    Are there any update for this issue?I post the answer could solved it?

  • @LeonLu your answer did solve it. The children views were riddled with margin adjustments to solve this "hidden" margin from tabbed page. Thank you for the response @LeonLu and @NMackay :smiley:

  • Coruscate5Coruscate5 USMember ✭✭

    Can this technique be used to modify the position and spacing in the Tabs? I've been struggling for months trying to figure out a way to move the PivotTable (?) to the bottom of the UWP app with Xamarin, and control the spacing between tabs (which looks quite awful with all the tabs squished against the top-left)

Sign In or Register to comment.