none
Xamarin Previewer Displaying Similar ScrollView(s) Differently RRS feed

  • Question

  • I have two ScrollView(s), each containing a StackLayout, both of which are almost identical. However, the Xamarin Previewer is displaying them differently for a reason that I can't seem to figure out. Here is my XAML:

    <ScrollView x:Name="scrNames" Grid.Column="1" Orientation="Horizontal" HorizontalScrollBarVisibility="Never" VerticalScrollBarVisibility="Never">
    	<StackLayout x:Name="stkNames" Orientation="Horizontal" Spacing="0" Padding="0" Margin="0" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill">
    		<StackLayout.Resources>
    			<Style TargetType="Frame"><Setter Property="Padding" Value="0,-4,0,4"/><Setter Property="CornerRadius" Value="0"/></Style>
    			<Style TargetType="Label" BasedOn="{StaticResource ItemText}"><Setter Property="HorizontalOptions" Value="CenterAndExpand"/></Style>
    		</StackLayout.Resources>
    		<Frame BackgroundColor="Blue" WidthRequest="120"><Label Text="Player 1"/></Frame>
    		<Frame BackgroundColor="Green" WidthRequest="75"><Label Text="Nate"/></Frame>
    		<Frame BackgroundColor="DarkOrange" WidthRequest="135"><Label Text="Next Player"/></Frame>
    		<Frame BackgroundColor="Gray" WidthRequest="100"><Label Text="Player 4"/></Frame>
    	</StackLayout>
    </ScrollView>
    
    <ScrollView x:Name="scrTotals" Grid.Column="1" Grid.Row="2" Orientation="Horizontal" HorizontalScrollBarVisibility="Never" VerticalScrollBarVisibility="Never">
    	<StackLayout x:Name="stkTotals" Orientation="Horizontal" Spacing="0" Padding="0" Margin="0" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill">
    		<StackLayout.Resources>
    			<Style TargetType="Frame"><Setter Property="Padding" Value="0,-4,0,0"/><Setter Property="CornerRadius" Value="0"/></Style>
    			<Style TargetType="Label" BasedOn="{StaticResource ItemText}"/>
    		</StackLayout.Resources>
    		<Frame BackgroundColor="Blue" WidthRequest="120"><Label Text="84"/></Frame>
    		<Frame BackgroundColor="Green" WidthRequest="75"><Label Text="100"/></Frame>
    		<Frame BackgroundColor="DarkOrange" WidthRequest="135"><Label Text="-15"/></Frame>
    		<Frame BackgroundColor="Gray" WidthRequest="100"><Label Text="0"/></Frame>
    	</StackLayout>
    </ScrollView>

    And here is the ItemText Style that is used:

    <Style x:Key="ItemText" TargetType="Label">
    	<Setter Property="FontSize" Value="24"/>
    	<Setter Property="TextColor" Value="Black"/>
    	<Setter Property="HorizontalOptions" Value="EndAndExpand"/>
    	<Setter Property="HorizontalTextAlignment" Value="End"/>
    	<Setter Property="Margin" Value="5,0"/>
    	<Setter Property="FontFamily" Value="Arial"/>
    </Style>

    As you can see, there are very few differences between the two sections of code, yet here are screenshots of what is displayed in Visual Studio 2019:

    Notice that in the second screenshot, the ScrollView/StackLayout is cropped, while it is not in the first. What is causing this difference? Thanks.


    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Saturday, October 19, 2019 10:44 PM

All replies

  • Hi,

    Since your question is about Xamarin, this out of the scope of MSDN UWP forum. I'd suggest you to ask about this in Xamarin official forum about this. There will provide more support about Xamarin.

    Best regards,

    Roy

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, October 21, 2019 1:07 AM