完善详情页面

PixivFSUWP/Controls/ImageSelectorPanel.cs

@@ -0,0 +1,86 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Windows.Foundation;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace PixivFSUWP.Controls
+{
+    public class ImageSelectorPanel : Panel
+    {
+        //此属性决定项目间隔
+        public static readonly DependencyProperty ItemMarginProperty =
+            DependencyProperty.Register("ItemMargin", typeof(double),
+                typeof(ImageSelectorPanel), new PropertyMetadata((double)0,
+                    (DepObj, e) =>
+                    {
+                        (DepObj as ImageSelectorPanel).InvalidateMeasure();
+                        (DepObj as ImageSelectorPanel).InvalidateArrange();
+                    }));
+
+        public double ItemMargin
+        {
+            get => (double)GetValue(ItemMarginProperty);
+            set => SetValue(ItemMarginProperty, value);
+        }
+
+        //此属性决定左端间距
+        public static readonly DependencyProperty LeftOffsetProperty =
+            DependencyProperty.Register("LeftOffset", typeof(double),
+                typeof(ImageSelectorPanel), new PropertyMetadata((double)0,
+                    (DepObj, e) =>
+                    {
+                        (DepObj as ImageSelectorPanel).InvalidateMeasure();
+                        (DepObj as ImageSelectorPanel).InvalidateArrange();
+                    }));
+
+        public double LeftOffset
+        {
+            get => (double)GetValue(LeftOffsetProperty);
+            set => SetValue(LeftOffsetProperty, value);
+        }
+
+        //此属性决定右端间距
+        public static readonly DependencyProperty RightOffsetProperty =
+            DependencyProperty.Register("RightOffset", typeof(double),
+                typeof(ImageSelectorPanel), new PropertyMetadata((double)0,
+                    (DepObj, e) =>
+                    {
+                        (DepObj as ImageSelectorPanel).InvalidateMeasure();
+                        (DepObj as ImageSelectorPanel).InvalidateArrange();
+                    }));
+
+        public double RightOffset
+        {
+            get => (double)GetValue(RightOffsetProperty);
+            set => SetValue(RightOffsetProperty, value);
+        }
+
+        protected override Size MeasureOverride(Size availableSize)
+        {
+            Size toret = new Size();
+            toret.Height = availableSize.Height;
+            toret.Width = LeftOffset + ItemMargin * (Children.Count - 1) + RightOffset;
+            foreach (var i in Children)
+            {
+                i.Measure(new Size(double.PositiveInfinity, toret.Height));
+                toret.Width += i.DesiredSize.Width;
+            }
+            return toret;
+        }
+
+        protected override Size ArrangeOverride(Size finalSize)
+        {
+            double xOffset = LeftOffset;
+            foreach (var i in Children)
+            {
+                i.Arrange(new Rect(xOffset, 0, i.DesiredSize.Width, i.DesiredSize.Height));
+                xOffset += i.DesiredSize.Width + ItemMargin;
+            }
+            return finalSize;
+        }
+    }
+}

PixivFSUWP/Data/IllustDetail.cs

@@ -15,6 +15,7 @@ public class IllustDetail
         public string Caption { get; set; }
         public int AuthorID { get; set; }
         public string Author { get; set; }
+        public string AuthorAccount { get; set; }
         public string AuthorAvatarUrl { get; set; }
         public List<string> Tags { get; set; }
         public List<string> Tools { get; set; }
@@ -37,6 +38,7 @@ public static IllustDetail FromJsonValue(JsonValue Source)
             toret.Caption = Source.Item("illust").Item("caption").AsString();
             toret.AuthorID = Source.Item("illust").Item("user").Item("id").AsInteger();
             toret.Author = Source.Item("illust").Item("user").Item("name").AsString();
+            toret.AuthorAccount = Source.Item("illust").Item("user").Item("account").AsString();
             toret.AuthorAvatarUrl = Source.Item("illust").Item("user").Item("profile_image_urls").Item("medium").AsString();
             var tags = Source.Item("illust").Item("tags").AsArray();
             toret.Tags = new List<string>();

PixivFSUWP/IllustDetailPage.xaml

@@ -3,6 +3,7 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:PixivFSUWP"
+    xmlns:controls="using:PixivFSUWP.Controls"
     xmlns:viewmodels="using:PixivFSUWP.ViewModels"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
@@ -15,27 +16,49 @@
         <StackPanel Margin="0,75,0,0">
             <StackPanel Orientation="Horizontal" Margin="15,15,15,0">
                 <TextBlock x:Name="txtTitle" FontSize="24" FontWeight="Bold"/>
-                <TextBlock x:Name="txtLoadingStatus" Margin="15,0,0,3" VerticalAlignment="Bottom"/>
+                <FontIcon x:Name="iconView" Margin="15,0,0,2" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="10" Glyph="&#xE890;" VerticalAlignment="Bottom"/>
+                <TextBlock x:Name="txtViewStatus" Margin="3,0,0,0" FontSize="12" VerticalAlignment="Bottom"/>
+                <FontIcon x:Name="iconStar" Margin="15,0,0,3" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="10" Glyph="&#xE734;" VerticalAlignment="Bottom"/>
+                <TextBlock x:Name="txtBookmarkStatus" Margin="3,0,0,0" FontSize="12" VerticalAlignment="Bottom"/>
             </StackPanel>
+            <TextBlock x:Name="txtLoadingStatus" Margin="15,15,0,0" FontSize="12" VerticalAlignment="Bottom"/>
             <ListView ScrollViewer.VerticalScrollBarVisibility="Disabled" 
-                      ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                      ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                       ScrollViewer.HorizontalScrollMode="Enabled" 
                       ScrollViewer.VerticalScrollMode="Disabled"
-                      SelectionMode="None"
-                      Margin="15,15,0,0" x:Name="ImageList">
+                      SelectionMode="None" MaxHeight="1"
+                      Margin="0,10,0,0" x:Name="ImageList">
                 <ListView.ItemsPanel>
                     <ItemsPanelTemplate>
-                        <StackPanel Orientation="Horizontal"/>
+                        <controls:ImageSelectorPanel LeftOffset="15" RightOffset="15" ItemMargin="15"/>
                     </ItemsPanelTemplate>
                 </ListView.ItemsPanel>
                 <ListView.ItemTemplate>
                     <DataTemplate x:DataType="viewmodels:ImageItemViewModel">
-                        <Grid Margin="-12,0" Padding="0,0,15,0">
+                        <Grid Margin="-12,0">
                             <Image Source="{Binding ImageSource}"/>
                         </Grid>
                     </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
+            <Grid Margin="15,15,15,0" Height="50" x:Name="gridAuthor">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="50"/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition/>
+                    <RowDefinition/>
+                </Grid.RowDefinitions>
+                <Ellipse Grid.RowSpan="2" Width="50" Height="50">
+                    <Ellipse.Fill>
+                        <ImageBrush x:Name="imgAuthor"/>
+                    </Ellipse.Fill>
+                </Ellipse>
+                <TextBlock x:Name="txtAuthor" Margin="10,0" Grid.Column="1" FontSize="16" FontWeight="Bold" VerticalAlignment="Bottom"/>
+                <TextBlock x:Name="txtAuthorAccount" Margin="10,0" Grid.Row="1" Grid.Column="1" FontSize="14" Foreground="Gray" VerticalAlignment="Top"/>
+            </Grid>
+            <TextBlock x:Name="txtCaption" Margin="15,15,15,0" Height="Auto" TextWrapping="WrapWholeWords"/>
         </StackPanel>
     </ScrollViewer>
 </Page>

PixivFSUWP/IllustDetailPage.xaml.cs

@@ -41,35 +41,44 @@ protected override void OnNavigatedTo(NavigationEventArgs e)
             ((Frame.Parent as Grid)?.Parent as MainPage)?.SelectNavPlaceholder("详情");
             illustID = (int)e.Parameter;
             base.OnNavigatedTo(e);
-            ImageList.MaxHeight = Frame.ActualHeight - 150;
-            txtTitle.Text = "加载中";
             _ = loadContent();
         }
 
         private async Task loadContent()
         {
+            txtTitle.Text = "加载中";
+            iconView.Visibility = Visibility.Collapsed;
+            iconStar.Visibility = Visibility.Collapsed;
             var res = await Task.Run(() =>
                 new PixivAppAPI(Data.OverAll.GlobalBaseAPI)
                 .csfriendly_illust_detail(illustID.ToString()));
             ImageList.ItemsSource = new ObservableCollection<ViewModels.ImageItemViewModel>();
             illust = Data.IllustDetail.FromJsonValue(res);
+            imgAuthor.ImageSource = await Data.OverAll.LoadImageAsync(illust.AuthorAvatarUrl);
             txtTitle.Text = illust.Title;
+            iconView.Visibility = Visibility.Visible;
+            iconStar.Visibility = Visibility.Visible;
+            txtViewStatus.Text = illust.TotalView.ToString();
+            txtBookmarkStatus.Text = illust.TotalBookmarks.ToString();
+            txtAuthor.Text = illust.Author;
+            txtAuthorAccount.Text = string.Format("@{0}", illust.AuthorAccount);
+            txtCaption.Text = illust.Caption.Replace("<br/>", "\n");
             int counter = 0;
             foreach (var i in illust.OriginalUrls)
             {
-                txtLoadingStatus.Text = string.Format("正在加载第{0}张，共{1}张", ++counter, illust.OriginalUrls.Count);
+                txtLoadingStatus.Text = string.Format("正在加载第 {0} 张，共 {1} 张", ++counter, illust.OriginalUrls.Count);
                 (ImageList.ItemsSource as ObservableCollection<ViewModels.ImageItemViewModel>)
                     .Add(new ViewModels.ImageItemViewModel()
                     {
                         ImageSource = await Data.OverAll.LoadImageAsync(i)
                     });
             }
-            txtLoadingStatus.Text = string.Format("共{0}张作品", illust.OriginalUrls.Count);
+            txtLoadingStatus.Text = string.Format("共 {0} 张作品，点击或触摸查看大图", illust.OriginalUrls.Count);
         }
 
         private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
         {
-            ImageList.MaxHeight = Frame.ActualHeight - 150;
+            ImageList.MaxHeight = Frame.ActualHeight - 245;
         }
     }
 }

PixivFSUWP/MainPage.xaml.cs

@@ -36,7 +36,6 @@ public MainPage()
             view.TitleBar.ButtonForegroundColor = Colors.Black;
             view.TitleBar.ButtonInactiveForegroundColor = Colors.Gray;
             view.Title = "Pixiv UWP";
-            //ContentFrame.Navigate(typeof(WaterfallPage), WaterfallPage.ListContent.Recommend);
         }
 
         private async void NavControl_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)

PixivFSUWP/PixivFSUWP.csproj

@@ -127,6 +127,7 @@
     <Compile Include="App.xaml.cs">
       <DependentUpon>App.xaml</DependentUpon>
     </Compile>
+    <Compile Include="Controls\ImageSelectorPanel.cs" />
     <Compile Include="Controls\WaterfallContentPanel.cs" />
     <Compile Include="Controls\WaterfallListView.cs" />
     <Compile Include="Data\IllustDetail.cs" />