Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

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

Goutham_HasProblemsGoutham_HasProblems Member ✭✭✭
edited September 22 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.