XFENewsApplication

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="XFENewsApplication.Views.NewsViewPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XFENewsApplication.Views"
    xmlns:coremodel="using:XFENewsApplication.Core.Models"
    xmlns:model="using:XFENewsApplication.Models"
    xmlns:converter="using:XFEExtension.NetCore.WinUIHelper.Utilities.Converter"
    xmlns:innerconverter="using:XFENewsApplication.Utilities.Converter"
    xmlns:viewmodel="using:XFENewsApplication.ViewModels"
    xmlns:selector="using:XFENewsApplication.Utilities.Selector"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Tag>
        <StackPanel>
            <Button x:Name="saveImageButton" Command="{x:Bind ViewModel.SavePictureCommand}"/>
            <Button x:Name="previewImageButton" Command="{x:Bind ViewModel.ViewPictureCommand}"/>
            <Button x:Name="shareImageButton" Command="{x:Bind ViewModel.SharePictureCommand}"/>
            <Button x:Name="previewImageInBrowserButton" Command="{x:Bind ViewModel.ViewPictureInBrowserCommand}"/>
        </StackPanel>
    </Page.Tag>
    <Page.Resources>
        <converter:URLImageConverter x:Key="URLImageConverter"/>
        <converter:StringFormatConverter x:Key="StringFormatConverter"/>
        <innerconverter:StringEmptyVisibilityConverter x:Key="StringEmptyVisibilityConverter"/>
        <viewmodel:NewsViewPageViewModel x:Key="ViewModel"/>
        <DataTemplate x:Key="TextDataTemplate" x:DataType="model:TextArticlePart">
            <TextBlock Margin="0,10" Text="{x:Bind Content}" FontSize="{x:Bind FontSize}" FontWeight="{x:Bind FontWeight}" TextWrapping="Wrap" IsTextSelectionEnabled="True"/>
        </DataTemplate>
        <DataTemplate x:Key="AuthorDataTemplate" x:DataType="model:AuthorArticlePart">
            <Border Padding="10,10,16,10" Margin="0,24" HorizontalAlignment="Stretch" Background="{ThemeResource ControlFillColorDefault}" CornerRadius="8">
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                    <PersonPicture Width="40" Height="40" Margin="10,0,0,0" ProfilePicture="{x:Bind Content}" VerticalAlignment="Center"/>
                    <TextBlock Margin="10,0,0,0" Text="{x:Bind ProviderName}" FontSize="18" FontWeight="Bold" VerticalAlignment="Center"/>
                    <Rectangle Margin="22,0" Fill="{ThemeResource TextFillColorDisabled}" Width="1" RadiusY="0" RadiusX="0" VerticalAlignment="Stretch"/>
                    <TextBlock Text="{x:Bind AuthorName}" FontSize="18" VerticalAlignment="Center"/>
                    <TextBlock Margin="4,0,0,0" Text="{x:Bind PublishDateTime, Converter={StaticResource StringFormatConverter}, ConverterParameter='的报道 · (0)'}" FontSize="18" VerticalAlignment="Center" Foreground="{ThemeResource TextFillColorDisabled}"/>
                    <StackPanel Visibility="{x:Bind ReadTime, Converter={StaticResource StringEmptyVisibilityConverter}, FallbackValue=Collapsed}" Orientation="Horizontal" VerticalAlignment="Center" Margin="8,0,0,0" Spacing="8">
                        <TextBlock Text="·" FontSize="18" VerticalAlignment="Center" Foreground="{ThemeResource TextFillColorDisabled}"/>
                        <FontIcon Glyph="&#xE916;" FontSize="18" VerticalAlignment="Center" Foreground="#13A10E"/>
                        <TextBlock Text="{x:Bind ReadTime, Converter={StaticResource StringFormatConverter}, ConverterParameter='阅读时间 (0) 分钟'}" FontSize="18" VerticalAlignment="Center" Foreground="#13A10E"/>
                    </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="TitleDataTemplate" x:DataType="model:TitleArticlePart">
            <StackPanel Margin="0,24,0,10" Orientation="Vertical" Spacing="10">
                <Rectangle Fill="#2169EB" Height="10" Width="80" RadiusY="0" RadiusX="0" HorizontalAlignment="Left"/>
                <TextBlock Text="{x:Bind Content}" FontSize="{x:Bind FontSize}" FontWeight="{x:Bind FontWeight}" TextWrapping="Wrap" IsTextSelectionEnabled="True" LineHeight="30"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="QuoteDataTemplate" x:DataType="model:QuoteArticlePart">
            <StackPanel Margin="0,24" Orientation="Vertical" HorizontalAlignment="Stretch">
                <Rectangle Margin="0,0,0,10" Fill="{ThemeResource TextFillColorDisabled}" Height="1" RadiusY="0" RadiusX="0" HorizontalAlignment="Stretch"/>
                <FontIcon Glyph="&#xE9B2;" FontSize="36" Foreground="#2169EB" HorizontalAlignment="Left" Margin="24,0"/>
                <TextBlock Text="{x:Bind Content}" FontSize="{x:Bind FontSize}" FontWeight="{x:Bind FontWeight}" TextWrapping="Wrap" IsTextSelectionEnabled="True" LineHeight="30" Margin="24,0"/>
                <Rectangle Margin="0,10,0,0" Fill="{ThemeResource TextFillColorDisabled}" Height="1" RadiusY="0" RadiusX="0" HorizontalAlignment="Stretch"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="CustomTextDataTemplate" x:DataType="model:CustomTextArticlePart">
            <ContentPresenter Content="{x:Bind CustomTextBlock}"/>
        </DataTemplate>
        <DataTemplate x:Key="FlipImageDataTemplate" x:DataType="model:FlipImageArticlePart">
            <Grid HorizontalAlignment="Center" Margin="0,10">
                <Border Margin="1" CornerRadius="8" Background="{ThemeResource FocusStrokeColorOuterBrush}"/>
                <Image MaxWidth="950" MaxHeight="500" Margin="10" Source="{Binding ElementName=imageFlipView, Path=SelectedItem, Converter={StaticResource URLImageConverter}}"/>
                <Border MaxWidth="950" MaxHeight="500" CornerRadius="8" Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">
                    <FlipView x:Name="imageFlipView" ItemsSource="{x:Bind Images}">
                        <FlipView.ItemTemplate>
                            <DataTemplate x:DataType="model:FlipImage">
                                <Grid>
                                    <Image Source="{x:Bind ImageUrl, Converter={StaticResource URLImageConverter}}">
                                        <Image.ContextFlyout>
                                            <CommandBarFlyout>
                                                <AppBarButton Icon="BrowsePhotos" Label="查看图片" Command="{Binding ElementName=previewImageButton, Path=Command}" CommandParameter="{x:Bind ImageUrl}"/>
                                                <AppBarButton Icon="Share" Label="分享图片" Command="{Binding ElementName=shareImageButton, Path=Command}" CommandParameter="{x:Bind ImageUrl}"/>
                                                <AppBarButton Label="在浏览器中打开" Command="{Binding ElementName=previewImageInBrowserButton, Path=Command}" CommandParameter="{x:Bind ImageUrl}">
                                                    <AppBarButton.Icon>
                                                        <FontIcon Glyph="&#xE8A7;"/>
                                                    </AppBarButton.Icon>
                                                </AppBarButton>
                                                <CommandBarFlyout.SecondaryCommands>
                                                    <AppBarButton Icon="Save" Label="另存为" Command="{Binding ElementName=saveImageButton, Path=Command}" CommandParameter="{x:Bind ImageUrl}"/>
                                                </CommandBarFlyout.SecondaryCommands>
                                            </CommandBarFlyout>
                                        </Image.ContextFlyout>
                                    </Image>
                                    <Border x:Name="infomationBorder" Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}" PointerEntered="Border_PointerEntered" PointerExited="Border_PointerExited" VerticalAlignment="Bottom" Padding="10">
                                        <Border.OpacityTransition>
                                            <ScalarTransition/>
                                        </Border.OpacityTransition>
                                        <StackPanel Orientation="Vertical">
                                            <TextBlock Margin="0,10" Text="{x:Bind Title}" Visibility="{x:Bind Title, Converter={StaticResource StringEmptyVisibilityConverter}}" FontSize="18" FontWeight="SemiBold" TextWrapping="Wrap"/>
                                            <TextBlock Margin="0,5" Text="{x:Bind Attribution}" Visibility="{x:Bind Attribution, Converter={StaticResource StringEmptyVisibilityConverter}}" FontSize="12" Foreground="{ThemeResource TextFillColorSecondary}" TextWrapping="Wrap"/>
                                            <TextBlock Text="{x:Bind Description}" Visibility="{x:Bind Description, Converter={StaticResource StringEmptyVisibilityConverter}}" FontSize="15" TextWrapping="Wrap"/>
                                        </StackPanel>
                                    </Border>
                                </Grid>
                            </DataTemplate>
                        </FlipView.ItemTemplate>
                    </FlipView>
                </Border>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="ImageDataTemplate" x:DataType="model:ImageArticlePart">
            <Grid HorizontalAlignment="Center" Margin="0,10">
                <Border Margin="1" CornerRadius="8" Background="{ThemeResource FocusStrokeColorOuterBrush}"/>
                <Image MaxWidth="950" MaxHeight="950" Margin="10" Source="{x:Bind Content, Converter={StaticResource URLImageConverter}}"/>
                <Border CornerRadius="8" Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">
                    <Border.ContextFlyout>
                        <CommandBarFlyout>
                            <AppBarButton Icon="BrowsePhotos" Label="查看图片" Command="{Binding ElementName=previewImageButton, Path=Command}" CommandParameter="{x:Bind Content}"/>
                            <AppBarButton Icon="Share" Label="分享图片" Command="{Binding ElementName=shareImageButton, Path=Command}" CommandParameter="{x:Bind Content}"/>
                            <AppBarButton Label="在浏览器中打开" Command="{Binding ElementName=previewImageInBrowserButton, Path=Command}" CommandParameter="{x:Bind Content}">
                                <AppBarButton.Icon>
                                    <FontIcon Glyph="&#xE8A7;"/>
                                </AppBarButton.Icon>
                            </AppBarButton>
                            <CommandBarFlyout.SecondaryCommands>
                                <AppBarButton Icon="Save" Label="另存为" Command="{Binding ElementName=saveImageButton, Path=Command}" CommandParameter="{x:Bind Content}"/>
                            </CommandBarFlyout.SecondaryCommands>
                        </CommandBarFlyout>
                    </Border.ContextFlyout>
                    <StackPanel Orientation="Vertical" Spacing="10">
                        <Image Margin="10,10,10,0" MaxWidth="950" MaxHeight="950" Source="{x:Bind Content, Converter={StaticResource URLImageConverter}}"/>
                        <StackPanel Margin="2,0" Orientation="Horizontal" Spacing="10" Visibility="{x:Bind From, Converter={StaticResource StringEmptyVisibilityConverter}}">
                            <TextBlock Text="└─" FontSize="28" Foreground="#2169EB"/>
                            <TextBlock Text="{x:Bind From}" FontSize="12" VerticalAlignment="Center"/>
                        </StackPanel>
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>
        <selector:ArticleDataTemplateSelector x:Key="ArticleDataTemplateSelector" DefaultDataTemplate="{StaticResource TextDataTemplate}" TextDataTemplate="{StaticResource TextDataTemplate}" ImageDataTemplate="{StaticResource ImageDataTemplate}" TitleDataTemplate="{StaticResource TitleDataTemplate}" QuoteDataTemplate="{StaticResource QuoteDataTemplate}" CustomTextDataTemplate="{StaticResource CustomTextDataTemplate}" AuthorDataTemplate="{StaticResource AuthorDataTemplate}" FlipImageDataTemplate="{StaticResource FlipImageDataTemplate}"/>
    </Page.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ContentDialog x:Name="previewImageContentDialog" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" PrimaryButtonText="保存" SecondaryButtonText="取消" DefaultButton="Secondary">
            <ScrollViewer ZoomMode="Enabled" HorizontalScrollBarVisibility="Auto">
                <Image Source="{x:Bind ViewModel.PreviewImageUrl, Mode=OneWay, Converter={StaticResource URLImageConverter}}" Stretch="Fill"/>
            </ScrollViewer>
        </ContentDialog>
        <Border x:Name="sideBar" MinWidth="300" MaxWidth="800" Width="{x:Bind ViewModel.SideBarWidth, Mode=TwoWay}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <AutoSuggestBox Margin="8,0,10,10" HorizontalAlignment="Stretch" PlaceholderText="搜索新闻" QueryIcon="Find" Text="{x:Bind ViewModel.SearchText, Mode=TwoWay}"/>
                <ListView Grid.Row="1" x:Name="newsSourceListView" ItemsSource="{x:Bind ViewModel.NewsList}" SelectionMode="Single" SelectedIndex="{x:Bind ViewModel.SelectedIndex, Mode=TwoWay}" Margin="0,5,0,0">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="coremodel:NewsSource">
                            <StackPanel Orientation="Vertical" Padding="5,24" Spacing="12">
                                <TextBlock Text="{x:Bind Title}" MaxLines="2" Style="{StaticResource SubtitleTextBlockStyle}" TextWrapping="Wrap"/>
                                <TextBlock Text="{x:Bind Abstract}" MaxLines="3" Foreground="{ThemeResource TextFillColorSecondaryBrush}" TextWrapping="Wrap"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem" BasedOn="{StaticResource DefaultListViewItemStyle}">
                            <Setter Property="Margin" Value="4,0,5,4"/>
                            <Setter Property="CornerRadius" Value="12"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                    <ListView.Footer>
                        <Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
                            <StackPanel Visibility="{x:Bind ViewModel.IsSideBarMoreContentLoadingVisible, Mode=OneWay}" Margin="0,12,0,32" HorizontalAlignment="Center" Orientation="Horizontal" Spacing="10">
                                <ProgressRing Width="20" Height="20" IsIndeterminate="True"/>
                                <TextBlock Text="加载中......" FontSize="12" Foreground="{ThemeResource TextFillColorDisabled}"/>
                            </StackPanel>
                        </Grid>
                    </ListView.Footer>
                </ListView>
                <Border Grid.RowSpan="2" Visibility="{x:Bind ViewModel.IsSideBarLoadingVisible, Mode=OneWay}" Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <ProgressBar Width="200" IsIndeterminate="True" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </Grid>
        </Border>
        <controls:ContentSizer Grid.Column="1" TargetControl="{x:Bind sideBar}" CornerRadius="4"/>
        <Border Grid.Column="2" MinWidth="500">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <ListView x:Name="contentListView" ItemsSource="{x:Bind ViewModel.ContentList}" SelectionMode="None" ItemTemplateSelector="{StaticResource ArticleDataTemplateSelector}">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="MaxWidth" Value="950"/>
                            <Setter Property="Margin" Value="0"/>
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        </Style>
                    </ListView.ItemContainerStyle>
                </ListView>
                <Border Grid.RowSpan="2" Visibility="{x:Bind ViewModel.IsContentLoadingVisible, Mode=OneWay}" Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <ProgressRing Width="60" Height="60" IsIndeterminate="True" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <CommandBar Grid.Row="1" VerticalAlignment="Bottom" DefaultLabelPosition="Right">
                    <AppBarButton Icon="Share" Label="分享" Command="{x:Bind ViewModel.ShareCommand}"/>
                    <AppBarToggleButton Icon="Favorite" Label="收藏" IsChecked="{x:Bind ViewModel.IsFavoriteArticle, Mode=TwoWay}" Command="{x:Bind ViewModel.FavoriteCommand}"/>
                    <AppBarSeparator/>
                    <AppBarButton Label="在浏览器中打开" Command="{x:Bind ViewModel.OpenInBrowserCommand}">
                        <AppBarButton.Icon>
                            <FontIcon Glyph="&#xE8A7;"/>
                        </AppBarButton.Icon>
                    </AppBarButton>
                </CommandBar>
            </Grid>
        </Border>
    </Grid>
</Page>