Skip to content

Commit 44ce254

Browse files
RichasyRichasy
committed
调整视频卡片的UI显示，增加页面错误提示
1 parent 49ac0cb commit 44ce254

31 files changed

Lines changed: 589 additions & 174 deletions

‎src/App/App.csproj‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
<DependentUpon>BannerView.xaml</DependentUpon>
2626
</Compile>
2727
<Compile Include="Controls\CardPanel\CardPanel.cs" />
28+
<Compile Include="Controls\ErrorPanel.xaml.cs">
29+
<DependentUpon>ErrorPanel.xaml</DependentUpon>
30+
</Compile>
2831
<Compile Include="Controls\IconTextBlock.xaml.cs">
2932
<DependentUpon>IconTextBlock.xaml</DependentUpon>
3033
</Compile>
@@ -120,7 +123,7 @@
120123
<Compile Include="Resources\Converter\BoolToVisibilityConverter.cs" />
121124
<Compile Include="Resources\Converter\SortTypeTextConverter.cs" />
122125
<Compile Include="Resources\Converter\ObjectToBoolConverter.cs" />
123-
<Compile Include="Resources\Converter\StringToVisibilityConverter.cs" />
126+
<Compile Include="Resources\Converter\ObjectToVisibilityConverter.cs" />
124127
<Compile Include="Resources\Converter\UserLevelConverter.cs" />
125128
<Compile Include="Resources\Extension\ConnectedAnimationExtension.cs" />
126129
<Compile Include="Resources\Extension\NavigationExtension.cs" />
@@ -192,6 +195,7 @@
192195
<Content Include="Assets\Logo\Wide310x150Logo.scale-150.png" />
193196
<Content Include="Assets\Logo\Wide310x150Logo.scale-200.png" />
194197
<Content Include="Assets\Logo\Wide310x150Logo.scale-400.png" />
198+
<Content Include="Assets\Null_rgba.png" />
195199
<Content Include="Assets\Original_rgba_80.png" />
196200
<Content Include="Assets\Rookie_rgba_80.png" />
197201
<Content Include="Properties\Default.rd.xml" />
@@ -234,6 +238,10 @@
234238
<SubType>Designer</SubType>
235239
<Generator>MSBuild:Compile</Generator>
236240
</Page>
241+
<Page Include="Controls\ErrorPanel.xaml">
242+
<SubType>Designer</SubType>
243+
<Generator>MSBuild:Compile</Generator>
244+
</Page>
237245
<Page Include="Controls\IconTextBlock.xaml">
238246
<SubType>Designer</SubType>
239247
<Generator>MSBuild:Compile</Generator>

‎src/App/App.xaml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@
1919

2020
<converter:SortTypeTextConverter x:Key="SortTypeTextConverter" />
2121
<converter:UserLevelConverter x:Key="UserLevelConverter" />
22-
<converter:ObjectToBoolConverter x:Key="ObjectToBoolConverter"/>
23-
<converter:StringToVisibilityConverter x:Key="StringToVisibilityConverter"/>
22+
<converter:ObjectToBoolConverter x:Key="ObjectToBoolConverter" />
23+
<converter:ObjectToVisibilityConverter x:Key="ObjectToVisibilityConverter" />
24+
<converter:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
25+
<converter:BoolToVisibilityConverter x:Key="BoolToVisibilityReverseConverter" IsReverse="True" />
2426
</ResourceDictionary>
2527
</Application.Resources>
2628
</Application>

‎src/App/Assets/Null_rgba.png‎

14.8 KB
Loading

‎src/App/Controls/Bili/BannerView.xaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
<ScrollViewer
3636
x:Name="WideScrollViewer"
3737
HorizontalScrollBarVisibility="Hidden"
38+
HorizontalScrollMode="Auto"
3839
VerticalScrollBarVisibility="Hidden"
3940
VerticalScrollMode="Disabled"
4041
ViewChanged="OnWideScrollViewerChanged">

‎src/App/Controls/Bili/VideoItem.xaml‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222

2323
<local:CardPanel
2424
AutomationProperties.Name="{x:Bind ViewModel.Title, Mode=OneWay}"
25-
CornerRadius="{ThemeResource OverlayCornerRadius}"
2625
BorderBrush="{ThemeResource ControlElevationBorderBrush}"
27-
Click="OnContainerClick">
26+
Click="OnContainerClickAsync"
27+
CornerRadius="{ThemeResource OverlayCornerRadius}">
2828

2929
<VisualStateManager.VisualStateGroups>
3030
<VisualStateGroup x:Name="LayoutGroup">
@@ -49,6 +49,9 @@
4949
<Setter Target="ContentRow2.Height" Value="Auto" />
5050
<Setter Target="InlineUserContainer.(Grid.Row)" Value="1" />
5151
<Setter Target="TitleBlock.(Grid.Row)" Value="0" />
52+
<Setter Target="AdditionalOverlayContainer.Margin" Value="8,8,0,0" />
53+
<Setter Target="AdditionalOverlayContainer.VerticalAlignment" Value="Top" />
54+
<Setter Target="AdditionalOverlayContainer.HorizontalAlignment" Value="Left" />
5255
</VisualState.Setters>
5356
</VisualState>
5457
</VisualStateGroup>
@@ -66,8 +69,8 @@
6669
<Grid
6770
x:Name="CoverContainer"
6871
Height="124"
69-
CornerRadius="4,4,0,0"
70-
VerticalAlignment="Stretch">
72+
VerticalAlignment="Stretch"
73+
CornerRadius="4,4,0,0">
7174
<hn:ImageEx
7275
x:Name="CoverImage"
7376
LazyLoadingEnabled="True"
@@ -108,14 +111,23 @@
108111
RequestedTheme="Dark">
109112
<TextBlock Style="{StaticResource CaptionTextBlockStyle}" Text="{x:Bind ViewModel.Duration, Mode=OneWay}" />
110113
</Grid>
114+
115+
<Grid
116+
x:Name="AdditionalOverlayContainer"
117+
Margin="0,0,8,8"
118+
HorizontalAlignment="Right"
119+
VerticalAlignment="Bottom"
120+
Visibility="{x:Bind AdditionalOverlayContentVisibility, Mode=OneWay}">
121+
<ContentPresenter Content="{x:Bind AdditionalOverlayContent, Mode=OneWay}" />
122+
</Grid>
111123
</Grid>
112124

113125
<Grid
114126
x:Name="SingleAvatar"
115127
Margin="0,0,12,-18"
116128
HorizontalAlignment="Right"
117129
VerticalAlignment="Bottom"
118-
Visibility="{x:Bind IsShowAvatar,Mode=OneWay}">
130+
Visibility="{x:Bind IsShowAvatar, Mode=OneWay}">
119131
<Ellipse
120132
Width="40"
121133
Height="40"
@@ -132,24 +144,25 @@
132144
<Grid
133145
x:Name="ContentContainer"
134146
Grid.Row="1"
135-
Padding="12,8"
147+
Padding="12,8,12,0"
136148
RowSpacing="8">
137149
<Grid.RowDefinitions>
138150
<RowDefinition x:Name="ContentRow1" Height="Auto" />
139151
<RowDefinition x:Name="ContentRow2" Height="*" />
140152
<RowDefinition Height="Auto" />
153+
<RowDefinition Height="Auto" />
141154
</Grid.RowDefinitions>
142155
<StackPanel x:Name="InlineUserContainer" Orientation="Horizontal">
143-
<Grid Visibility="{x:Bind IsShowAvatar,Mode=OneWay}">
156+
<Grid Visibility="{x:Bind IsShowAvatar, Mode=OneWay}">
144157
<local:UserAvatar
145-
x:Name="InlineAvatar"
146-
Width="24"
147-
Height="24"
148-
Margin="0,0,8,0"
149-
VerticalAlignment="Center"
150-
Avatar="{x:Bind ViewModel.PublisherAvatar, Mode=OneWay}"
151-
UserName="{x:Bind ViewModel.PublisherName, Mode=OneWay}"
152-
Visibility="Collapsed" />
158+
x:Name="InlineAvatar"
159+
Width="24"
160+
Height="24"
161+
Margin="0,0,8,0"
162+
VerticalAlignment="Center"
163+
Avatar="{x:Bind ViewModel.PublisherAvatar, Mode=OneWay}"
164+
UserName="{x:Bind ViewModel.PublisherName, Mode=OneWay}"
165+
Visibility="Collapsed" />
153166
</Grid>
154167

155168
<TextBlock
@@ -171,6 +184,7 @@
171184
<ToolTip Content="{x:Bind ViewModel.Title, Mode=OneWay}" IsEnabled="{x:Bind TitleBlock.IsTextTrimmed, Mode=OneWay}" />
172185
</ToolTipService.ToolTip>
173186
</TextBlock>
187+
174188
<StackPanel
175189
Grid.Row="2"
176190
Orientation="Horizontal"
@@ -196,6 +210,9 @@
196210
Text="{x:Bind ViewModel.ReplyCount, Mode=OneWay}"
197211
Visibility="{x:Bind IsShowReplayCount, Mode=OneWay}" />
198212
</StackPanel>
213+
<Grid Grid.Row="3" Visibility="{x:Bind AdditionalFooterContent, Mode=OneWay, Converter={StaticResource ObjectToVisibilityConverter}}">
214+
<ContentPresenter x:Name="AdditionalFooterPresenter" Content="{x:Bind AdditionalFooterContent, Mode=OneWay}" />
215+
</Grid>
199216
</Grid>
200217
</Grid>
201218
</local:CardPanel>

‎src/App/Controls/Bili/VideoItem.xaml.cs‎

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// Copyright (c) Richasy. All rights reserved.
22

3+
using System;
34
using Richasy.Bili.ViewModels.Uwp;
45
using Windows.Foundation;
6+
using Windows.System;
57
using Windows.UI.Xaml;
68
using Windows.UI.Xaml.Controls;
79

@@ -60,6 +62,24 @@ public sealed partial class VideoItem : UserControl
6062
public static readonly DependencyProperty IsShowAvatarProperty =
6163
DependencyProperty.Register(nameof(IsShowAvatar), typeof(bool), typeof(VideoItem), new PropertyMetadata(true));
6264

65+
/// <summary>
66+
/// <see cref="AdditionalFooterContent"/>的依赖属性.
67+
/// </summary>
68+
public static readonly DependencyProperty AdditionalFooterContentProperty =
69+
DependencyProperty.Register(nameof(AdditionalFooterContent), typeof(object), typeof(VideoItem), new PropertyMetadata(null));
70+
71+
/// <summary>
72+
/// <see cref="AdditionalOverlayContent"/>的依赖属性.
73+
/// </summary>
74+
public static readonly DependencyProperty AdditionalOverlayContentProperty =
75+
DependencyProperty.Register(nameof(AdditionalOverlayContent), typeof(object), typeof(VideoItem), new PropertyMetadata(null));
76+
77+
/// <summary>
78+
/// <see cref="AdditionalOverlayContentVisibility"/>的依赖属性.
79+
/// </summary>
80+
public static readonly DependencyProperty AdditionalOverlayContentVisibilityProperty =
81+
DependencyProperty.Register(nameof(AdditionalOverlayContentVisibility), typeof(Visibility), typeof(VideoItem), new PropertyMetadata(Visibility.Collapsed));
82+
6383
/// <summary>
6484
/// Initializes a new instance of the <see cref="VideoItem"/> class.
6585
/// </summary>
@@ -141,6 +161,33 @@ public bool IsShowAvatar
141161
set { SetValue(IsShowAvatarProperty, value); }
142162
}
143163

164+
/// <summary>
165+
/// 附加的底部内容，显示在内容区底部.
166+
/// </summary>
167+
public object AdditionalFooterContent
168+
{
169+
get { return (object)GetValue(AdditionalFooterContentProperty); }
170+
set { SetValue(AdditionalFooterContentProperty, value); }
171+
}
172+
173+
/// <summary>
174+
/// 附加的Overlay内容，在竖向排版时显示在视频封面上，横向排版时显示在标题下方.
175+
/// </summary>
176+
public object AdditionalOverlayContent
177+
{
178+
get { return (object)GetValue(AdditionalOverlayContentProperty); }
179+
set { SetValue(AdditionalOverlayContentProperty, value); }
180+
}
181+
182+
/// <summary>
183+
/// 是否显示附加的Overlay内容.
184+
/// </summary>
185+
public Visibility AdditionalOverlayContentVisibility
186+
{
187+
get { return (Visibility)GetValue(AdditionalOverlayContentVisibilityProperty); }
188+
set { SetValue(AdditionalOverlayContentVisibilityProperty, value); }
189+
}
190+
144191
/// <summary>
145192
/// 获取占位大小，这是一个固定值，用于预先测量.
146193
/// </summary>
@@ -153,7 +200,7 @@ public Size GetHolderSize()
153200
}
154201
else
155202
{
156-
return new Size(210, 228);
203+
return new Size(210, 248);
157204
}
158205
}
159206

@@ -197,8 +244,10 @@ private void OnSizeChanged(object sender, SizeChangedEventArgs e)
197244
CheckOrientation();
198245
}
199246

200-
private void OnContainerClick(object sender, RoutedEventArgs e)
247+
private async void OnContainerClickAsync(object sender, RoutedEventArgs e)
201248
{
249+
var link = $"https://www.bilibili.com/video/av{ViewModel.VideoId}";
250+
await Launcher.LaunchUriAsync(new System.Uri(link)).AsTask();
202251
}
203252
}
204253
}

‎src/App/Controls/Bili/VideoView.xaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
ItemsJustification="Start"
1717
ItemsStretch="Fill"
1818
MinColumnSpacing="16"
19-
MinItemHeight="232"
20-
MinItemWidth="222"
19+
MinItemHeight="{x:Bind MinWideItemHeight, Mode=OneWay}"
20+
MinItemWidth="{x:Bind MinWideItemWidth, Mode=OneWay}"
2121
MinRowSpacing="16"
2222
Orientation="Horizontal" />
2323
<muxc:StackLayout
@@ -31,7 +31,7 @@
3131
<RowDefinition Height="Auto" />
3232
<RowDefinition Height="*" />
3333
</Grid.RowDefinitions>
34-
<Grid Margin="0,0,0,12" Visibility="{x:Bind HeaderVisibility,Mode=OneWay}">
34+
<Grid Margin="0,0,0,12" Visibility="{x:Bind HeaderVisibility, Mode=OneWay}">
3535
<Grid.ColumnDefinitions>
3636
<ColumnDefinition Width="*" />
3737
<ColumnDefinition Width="Auto" />

‎src/App/Controls/Bili/VideoView.xaml.cs‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,18 @@ public sealed partial class VideoView : UserControl
6262
public static readonly DependencyProperty HeaderVisibilityProperty =
6363
DependencyProperty.Register(nameof(HeaderVisibility), typeof(Visibility), typeof(VideoView), new PropertyMetadata(Visibility.Visible));
6464

65+
/// <summary>
66+
/// <see cref="MinWideItemHeight"/>的依赖属性.
67+
/// </summary>
68+
public static readonly DependencyProperty MinWideItemHeightProperty =
69+
DependencyProperty.Register(nameof(MinWideItemHeight), typeof(double), typeof(VideoView), new PropertyMetadata(232d));
70+
71+
/// <summary>
72+
/// <see cref="MinWideItemWidth"/>的依赖属性.
73+
/// </summary>
74+
public static readonly DependencyProperty MinWideItemWidthProperty =
75+
DependencyProperty.Register(nameof(MinWideItemWidth), typeof(double), typeof(VideoView), new PropertyMetadata(222d));
76+
6577
private ScrollViewer _parentScrollViewer;
6678
private double _itemHolderHeight = 0d;
6779

@@ -152,6 +164,24 @@ public Visibility HeaderVisibility
152164
set { SetValue(HeaderVisibilityProperty, value); }
153165
}
154166

167+
/// <summary>
168+
/// 在网格布局下，单个条目的最小宽度.
169+
/// </summary>
170+
public double MinWideItemWidth
171+
{
172+
get { return (double)GetValue(MinWideItemWidthProperty); }
173+
set { SetValue(MinWideItemWidthProperty, value); }
174+
}
175+
176+
/// <summary>
177+
/// 在网格布局下，单个条目的最小高度.
178+
/// </summary>
179+
public double MinWideItemHeight
180+
{
181+
get { return (double)GetValue(MinWideItemHeightProperty); }
182+
set { SetValue(MinWideItemHeightProperty, value); }
183+
}
184+
155185
private static void OnOrientationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
156186
{
157187
var instance = d as VideoView;

‎src/App/Controls/ErrorPanel.xaml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<UserControl
2+
x:Class="Richasy.Bili.App.Controls.ErrorPanel"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:local="using:Richasy.Bili.App.Controls"
7+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8+
d:DesignHeight="300"
9+
d:DesignWidth="400"
10+
mc:Ignorable="d">
11+
12+
<StackPanel Spacing="12">
13+
<Image
14+
Width="100"
15+
HorizontalAlignment="Center"
16+
Source="ms-appx:///Assets/Null_rgba.png" />
17+
<TextBlock
18+
Style="{StaticResource BodyTextBlockStyle}"
19+
HorizontalAlignment="Center"
20+
Text="{x:Bind Text, Mode=OneWay}"
21+
TextAlignment="Center"
22+
TextWrapping="Wrap" />
23+
<Button
24+
HorizontalAlignment="Center"
25+
Click="OnActionButtonClick"
26+
Content="{x:Bind ActionContent, Mode=OneWay}"
27+
Visibility="{x:Bind ActionContent, Mode=OneWay, Converter={StaticResource ObjectToVisibilityConverter}}" />
28+
</StackPanel>
29+
</UserControl>

0 commit comments

Comments
 (0)