收尾工作
最后稍微给这个控件美化一下(添加一些边距和背景颜色)
所有代码如下:
ImageView.xaml
<Grid>
<Grid Name="ControlGrid"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Background="#804D4D4D">
<Button x:Name="CloseBtn"
HorizontalAlignment="Right"
VerticalAlignment="Top"
BorderThickness="0"
Background="Transparent"
Canvas.ZIndex="1"
Click="CloseBtn_Click"
Margin="64">
<FontIcon Glyph="" Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"/>
</Button>
<ScrollViewer HorizontalAlignment="Stretch"
Name="MainScrollViewer"
ZoomMode="Enabled"
MinZoomFactor="0.8"
VerticalScrollMode="Enabled"
VerticalScrollBarVisibility="Visible"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Visible"
Margin="64">
<Image x:Name="MainImage"
MaxWidth="{x:Bind MainScrollViewer.ViewportWidth,Mode=OneWay}"
MaxHeight="{x:Bind MainScrollViewer.ViewportHeight,Mode=OneWay}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</ScrollViewer>
</Grid>
</Grid>
ImageView.xaml.cs
public sealed partial class ImageView : UserControl
{
private Popup Popup;
public ImageView()
{
this.InitializeComponent();
Window.Current.SizeChanged += WindowSizeChanged;
Popup = new Popup();
Popup.Child = this;
}
public void Show(string image)
{
MainImage.Source = new BitmapImage(new Uri(image));
this.Popup.IsOpen = true;
Width = Window.Current.Bounds.Width;
Height = Window.Current.Bounds.Height;
}
private void WindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
{
Width = e.Size.Width;
Height = e.Size.Height;
}
private void CloseBtn_Click(object sender, RoutedEventArgs e)
{
Window.Current.SizeChanged -= WindowSizeChanged;
this.Popup.IsOpen = false;
}
}
调用方法
new ImageView().Show(图片链接);
为了适配Fluent UI,我们还可以为这个控件添加一点动画和亚克力...
(这需要高版本支持,实现的方法也不难,代码我就不放了)
效果