DockPanel elements with annoying borders

How-to Discussions
1

Hi! I’ve this problem: when I use elements inside a DockPanel (and i set property for ex. Dock=“Top” / Dock=“Bottom” / …), those elements gets an annying light colored border (here the screen).
Borders

BUT, on desktop preview i don’t take any border like those. Help me!!

NoBordersOnDesktop

2

Hey @Francesco.

Can you provide us with the code, so we can copy-paste and see. On what mobile device are you testing?

3

Hey @Arturs, I simplified the code to make you easy to see what happens. If I set a background with the same color of the rectangle / panel docked ( in this case Page ux:Class=“Profile” Background="#000"), I don’t get any light border. I’m testing the app on Huawei P8 lite and Huawei P10 lite.

<Page ux:Class="Profile">
<Router ux:Dependency="router" />
<DockPanel>
    <Rectangle Dock="Top" Height="56" Background="#000">
        <Grid Columns="auto,1*,auto">
            <Panel Margin="16" Height="24" Width="24" HitTestMode="LocalBounds">
                <Rectangle ux:Name="topRectangle" Height="2" Width="26" Color="#fff">
                    <Translation Y="-9" ux:Name="topMenuTranslation" />
                    <Rotation ux:Name="topMenuRotation" />
                </Rectangle>
                <Rectangle ux:Name="middleRectangle" Height="2" Width="26" Color="#fff" />
                <Rectangle ux:Name="bottomRectangle" Height="2" Width="26" Color="#fff">
                    <Translation Y="9" ux:Name="bottomMenuTranslation" />
                    <Rotation ux:Name="bottomMenuRotation" />
                </Rectangle>
            </Panel>
            <Panel>
                <Text Alignment="Center" TextColor="#fff" TextAlignment="Center" FontSize="16" Value="FRANCESCO"/>
            </Panel>
            <Panel Margin="16" Height="24" Width="24" HitTestMode="LocalBounds" Alignment="Right">
                <Text Font="FontAwesome" Value="" FontSize="16" Alignment="Center" Color="#fff" />
            </Panel>
        </Grid>
    </Rectangle>
    

    <Panel Dock="Bottom" Background="#000" Padding="32"/>

    <Profilo1 />

    <Page ux:Class="Profilo1">
        <string ux:Key="Title" ux:Value="Profilo" />
        <string ux:Key="Icon" ux:Value="" />

        <ScrollView SnapMaxTransform="false" SnapMinTransform="false">
            <StackPanel Dock="Top">
                <Panel Background="#000" Padding="0, 0, 0, 8">
                    <Grid ColumnCount="3" Columns="1*,auto,1*" Padding="24,0">
                        <Panel Alignment="Center">
                            <StackPanel>
                                <Text Value="250" Color="#fff" TextAlignment="Center" /> 
                                <Text Value="Prenotazioni" Color="#fff" TextAlignment="Center" FontSize="14" />
                            </StackPanel>
                        </Panel>
                        <Panel>
                            <Circle Size="120" Margin="16" HitTestMode="LocalVisual">
                                <ImageFill Url="https://cdn.pixabay.com/photo/2017/04/05/11/56/image-in-the-image-2204798_960_720.jpg" />
                            </Circle>
                        </Panel>
                        <Panel Alignment="Center">
                            <StackPanel>
                                <Text Value="15" Color="#fff" TextAlignment="Center" /> 
                                <Text Value="Recensioni" Color="#fff" TextAlignment="Center" FontSize="14" />
                            </StackPanel>
                        </Panel>
                    </Grid>
                    <Shadow />
                </Panel>
            </StackPanel>
        </ScrollView>
    </Page>
</DockPanel>
4

Please I need to solve this problem :cry::cry::cry::cry: