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属性。