bloxstrap/Bloxstrap/UI/Elements/About/Pages/SupportersPage.xaml

<ui:UiPage x:Class="Bloxstrap.UI.Elements.About.Pages.SupportersPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:models="clr-namespace:Bloxstrap.UI.ViewModels"
      xmlns:controls="clr-namespace:Bloxstrap.UI.Elements.Controls"
      xmlns:enums="clr-namespace:Bloxstrap.Enums"
      xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
      xmlns:resources="clr-namespace:Bloxstrap.Resources"
      mc:Ignorable="d"
      d:DesignHeight="1500" d:DesignWidth="800"
      SizeChanged="UiPage_SizeChanged"
      Title="AboutPage"
      Scrollable="True">
    <StackPanel Margin="0,0,14,14">
        <TextBlock Text="{x:Static resources:Strings.About_Supporters_Title}" FontWeight="Medium" FontSize="24" />
        <controls:MarkdownTextBlock MarkdownText="{Binding Source={x:Static resources:Strings.About_Supporters_Description}, Converter={StaticResource StringFormatConverter}, ConverterParameter='https://ko-fi.com/boxerpizza'}" TextWrapping="Wrap" Foreground="{DynamicResource TextFillColorTertiaryBrush}" />

        <Grid Margin="0,8,0,0">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding LoadedState, Mode=OneWay}" Value="{x:Static enums:GenericTriState.Unknown}">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                    <Setter Property="Visibility" Value="Collapsed" />
                </Style>
            </Grid.Style>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <ui:ProgressRing Grid.Column="0" IsIndeterminate="True" />
            <TextBlock Grid.Column="1" Margin="16,0,0,0" Text="{x:Static resources:Strings.Common_Loading}" VerticalAlignment="Center" />
        </Grid>
        
        <Grid Margin="0,8,0,0">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding LoadedState, Mode=OneWay}" Value="{x:Static enums:GenericTriState.Failed}">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                    <Setter Property="Visibility" Value="Collapsed" />
                </Style>
            </Grid.Style>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="pack://application:,,,/Resources/MessageBox/Error.png" Width="60" Height="60" RenderOptions.BitmapScalingMode="HighQuality" />
            <StackPanel Grid.Column="1" Margin="16,0,0,0" VerticalAlignment="Center">
                <TextBlock Text="{x:Static resources:Strings.Common_NetworkError}" />
                <TextBlock Text="{Binding LoadError, Mode=OneWay}" />
            </StackPanel>
        </Grid>

        <StackPanel>
            <StackPanel.Style>
                <Style TargetType="StackPanel">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding LoadedState, Mode=OneWay}" Value="{x:Static enums:GenericTriState.Successful}">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                    <Setter Property="Visibility" Value="Collapsed" />
                </Style>
            </StackPanel.Style>

            <TextBlock Text="{x:Static resources:Strings.About_Supporters_Monthly}" FontWeight="Medium" FontSize="20" Margin="0,16,0,0" />
            <ListView ItemsSource="{Binding SupporterData.Monthly.Supporters, Mode=OneWay}" Margin="0,8,0,0" ScrollViewer.CanContentScroll="False" IsEnabled="False">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ui:Card Padding="8">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Ellipse Grid.Column="0" Height="32" Width="32" VerticalAlignment="Center">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="{Binding Image, IsAsync=True}" />
                                    </Ellipse.Fill>
                                </Ellipse>

                                <TextBlock Grid.Column="1" Margin="8,0,2,0" VerticalAlignment="Center" Text="{Binding Name}" />
                            </Grid>
                        </ui:Card>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="{Binding Columns}" Margin="-4" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>

            <TextBlock Text="{x:Static resources:Strings.About_Supporters_OneOff}" FontWeight="Medium" FontSize="20" Margin="0,16,0,0" />
            <ListView ItemsSource="{Binding SupporterData.OneOff.Supporters, Mode=OneWay}" Margin="0,8,0,0" ScrollViewer.CanContentScroll="False" IsEnabled="False">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ui:Card Padding="8">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <Ellipse Grid.Column="0" Height="32" Width="32" VerticalAlignment="Center">
                                    <Ellipse.Fill>
                                        <ImageBrush ImageSource="{Binding Image, IsAsync=True}" />
                                    </Ellipse.Fill>
                                </Ellipse>

                                <TextBlock Grid.Column="1" Margin="8,0,2,0" VerticalAlignment="Center" Text="{Binding Name}" />
                            </Grid>
                        </ui:Card>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="{Binding Columns}" Margin="-4" />
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
        </StackPanel>
    </StackPanel>
</ui:UiPage>