Why the margin of the first elements are not the same(*, 0) when horizontal scrolling? UWP muxc:ItemRepeater

Question

I previously ran UWP code like this:

in repeater page

<muxc:ItemsRepeaterScrollHost Grid.Row="1">
    <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled">
        <muxc:ItemsRepeater ItemsSource="{x:Bind ViewModel.Items, Mode=OneWay}">
            <muxc:ItemsRepeater.Layout>
                <muxc:StackLayout Orientation="Horizontal" Spacing="8" />
            </muxc:ItemsRepeater.Layout>
            <DataTemplate x:DataType="item:RepoListItem">
                <Grid>
                    <block:RepoButtonBlock
                                        x:Name="RepositoryBlock"
                                        Width="250"
                                        Height="{Binding ScrollViewer.Height}"
                                        VerticalAlignment="Stretch"
                                        DisplayStarButton="False"
                                        RepositoryId="{x:Bind RepoId, Mode=OneWay}" />
                </Grid>
            </DataTemplate>
        </muxc:ItemsRepeater>
    </ScrollViewer>
</muxc:ItemsRepeaterScrollHost>

ViewModel.Items:

public ObservableCollection<RepoListItem> PinnedRepos { get; private set; } = new();

RepoListItem:

    public class RepoListItem
    {
        public long RepoId { get; set; }

        public Repository Repository { get; set; }
    }

block:RepoButtonBlock user control

    <Grid>
        <Button
            x:Name="RepoBlockButton"
            Margin="0,3,0,0"
            Padding="18,12"
            Click="RepoBlockButton_Click"
            Style="{StaticResource ContentBlockButtonStyle}">
            ....
        </Button>
    </Grid>

The height of the block:RepoButtonBlock varies depending on the control inside the button. I set VerticalAlignment to Stretch because it scrolls horizontally and must be the same height. However, only the first repeater that scrolls and disappears will have the element height reduced to its actual size and fixed below. I have any idea. Is there solution to this problem?

before scrolling:

https://i.sstatic.net/NsXPJ.png

scrolled to the end:

https://i.sstatic.net/spxIV.png

back to the first elem:

https://i.sstatic.net/OO777.png

Answer 1

The code involved in presenting this code is so vast that it is impossible to present a portion of it.

Therefore, I fixed the height and set TextTrimming="CharacterEllipsis" to the TextBlock in the UserControl. so I fixed partially.