切换全屏并且控件大小随之改变,这个功能暂时没试
切换全屏并且控件大小随之改变,这个功能暂时没试。
大气象
<UserControl x:Class="HCLoad.test.uc_FullScreen"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="Black">
<Button Content="全屏" Height="23" HorizontalAlignment="Left" Margin="114,123,0,0" Name="btnFull" VerticalAlignment="Top" Width="75" Click="btnFull_Click" />
</Grid>
</UserControl>
大气象
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interop;
namespace HCLoad.test
{
public partial class uc_FullScreen : UserControl
{
public uc_FullScreen()
{
InitializeComponent();
//为全屏与非全屏切换注册事件
Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
}
//全屏
private void btnFull_Click(object sender, RoutedEventArgs e)
{
FullScreen();
}
#region 全屏
private void FullScreen()
{
Content contentObject = Application.Current.Host.Content;
contentObject.IsFullScreen = !contentObject.IsFullScreen;
}
private void Content_FullScreenChanged(Object sender, EventArgs e)
{
Content contentObject = Application.Current.Host.Content;
if (contentObject.IsFullScreen)
{
btnFull.Background = new SolidColorBrush(Colors.Green);
btnFull.Content = "退出全屏";
}
else
{
btnFull.Background = new SolidColorBrush(Colors.Red);
btnFull.Content = "全 屏";
}
}
#endregion
}
}
参考:
Silverlight插件支持全屏模式,这个没什么好说的,只需要用设置IsFullScreen属性即可,问题在于全屏模式中,尽管屏幕变大了,但是页面中的控件并未相应的变大,下面是我在网上找到的解决这个问题的两种方式。
第1种方式以图片为例,即应用图片的Stretch属性
<Grid x:Name="LayoutRoot" Background="White">
<Image Stretch="UniformToFill" Source="/FullScreenModel;component/Koala.jpg" />
<Button Content="全屏" Name="button1" Click="button1_Click" />
</Grid>
Click事件代码:
private void button1_Click(object sender, RoutedEventArgs e)
{
Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
}
这里主要是将Image的Stretch属性设置为UniformToFill,这样图片就可以根据浏览器分辨率的变化而变化,这种方式在处理图片,视频等资源时比较方便,不过使用这种方式在插入模式下使用图片时,你需要进行一些处理,因为若你在Image中指定Width或Height,图片在全屏模式下会保持这个固定的大小。
第2种方式则在后台进行处理,当处于全屏模式时,该页面上的控件也进行变化,以Button为例:
这种方式或许更贴*我们*常接触的全屏,我们看看这部分的实现
<Grid.RenderTransform>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="RootLayoutScaleTransform">
</ScaleTransform>
</Grid.RenderTransform>
<Button Name="button1" Content="全屏" Height="30" Width="50" Click="button1_Click" Margin="70,170,72,100">
</Button>
这里在UI中添加了一个名为RootLayoutScaleTransform的放大转换
后台代码主要是根据插件的Resized,FullScreenChanged事件进行处理的,所以我们在构造函数中声明
Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_Resized);
完整的代码:
private double width;
private double height;
public double uniformScaleAmount = 1;
public MainPage()
{
InitializeComponent();
height = this.Height;
width = this.Width;
Application.Current.Host.Content.Resized += new EventHandler(Content_Resized);
Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_Resized);
}
private void button1_Click(object sender, RoutedEventArgs e)
{
Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;
}
void Content_Resized(object sender, EventArgs e)
{
double currentWidth = Application.Current.Host.Content.ActualWidth;
double currentHeight = Application.Current.Host.Content.ActualHeight;
uniformScaleAmount = Math.Min((currentWidth / width), (currentHeight /height));
RootLayoutScaleTransform.ScaleX = uniformScaleAmount;
RootLayoutScaleTransform.ScaleY = uniformScaleAmount;
}
页面初始化后我们先将当前插件的大小保存了下来,当单击Button发生全屏事件时,会进行相关事件的处理,这种方式我觉得处理的更为妥善一些,程序运行的时候,如果你的界面上什么都没有,需要设置UserControl的Width, Height属性。
就看到这两种方式,有更好的方法请告诉我。