[Silverlight入门系列]实现局部元素全屏(Element部分全屏)

本文不讨论Silverlight全屏模式的实现，有关实现这个，可以参考TerryLee的这篇文章，核心代码就是这行：

Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;

本文要讨论的是Silverlight的局部元素全屏，即Element部分全屏。我们在做Silverlight项目中有时候客户有这种需求：希望放大界面的局部，比如一个列表面板啥的，而不是整个界面全屏。如下图：

实现部分全屏

实现起来也是比较简单，主要思路是用Popup实现弹出全屏，把需要全屏的元素放到容器里并设置为屏幕大小，然后整体实现全屏；当用户退出全屏的时候需要把元素恢复回原位置。好，我们写一个ElementsFullScreenProvider类，实现一个UIElement的扩展方法即可。

 

 

主要实现类：ElementsFullScreenProvider

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214

#region "Using Namespace" using System; System.Windows; System.Windows.Controls; System.Windows.Controls.Primitives; #endregion namespace ElementFullScreen {      /// <summary> /// Make partial UI elements full screen /// Provider features: ///    make UI element full screen ///    exit full screen and restore UI element ///    support UIElement.ToggleElementFullScreen -- extension methods /// </summary>      public static class ElementsFullScreenProvider      {          #region Members          static readonly Popup PopupContainer; Panel PopupContentContainer; static ElementController _lastElementController; #endregion #region ElementController class ElementController          {              double _height = .NaN; _width = .NaN; int _lastPanelPosition; bool _lastPopupIsOpen; readonly DependencyObject _parent;              Thickness? _margin; public UIElement Element { get ; private set ; } ElementController(UIElement element) {                  Element = element; var elem = element as FrameworkElement;                  if (elem != null && elem.Parent != ) {                      _parent = elem.Parent; } } void BringElementToFullScreen() { TryAction<frameworkelement>(Element,f => { _height = f.Height; _width = f.Width; f.Height = .NaN; f.Width = .NaN; }); TryAction<control>(Element,f => { _margin = f.Margin; f.Margin = new Thickness(0); }); (_parent != ) {                      (!TryAction<panel>(_parent,p => { _lastPanelPosition = p.Children.IndexOf(Element); p.Children.RemoveAt(_lastPanelPosition); }))                          (!TryAction<contentcontrol>(_parent,c => c.Content = ))                              (!TryAction<usercontrol>(_parent,u => u.Content = ))                                  TryAction<popup>(_parent,p => { _lastPopupIsOpen = p.IsOpen; p.Child = ; }); } } ReturnElementFromFullScreen() { ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:2em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:'Courier New',f => { f.Height = _height; f.Width = _width; }); { (_margin.HasValue) {                          f.Margin = _margin.Value; } }); ) { ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:2em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:'Courier New',p => p.Children.Insert(_lastPanelPosition,Element))) ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:2em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:'Courier New',u => u.Content = Element)) } } bool TryAction<t>( object o,Action<t> action) where T : class { T val = o T; (val != ) { action(val); return true ; } false ; } } #endregion #region FullscreenElementID Attached Property DependencyProperty FullscreenElementIDProperty = DependencyProperty.Registerattached(             "FullscreenElementID" , typeof (Guid?),monospace!important; min-height:inherit!important; white-space:pre-wrap">(ElementsFullScreenProvider),monospace!important; min-height:inherit!important; white-space:pre-wrap"> PropertyMetadata( )); SetFullscreenElementID(DependencyObject obj,Guid? value) { obj.SetValue(FullscreenElementIDProperty,value); } Guid? GetFullscreenElementID(DependencyObject obj) { return (Guid?)obj.GetValue(FullscreenElementIDProperty); } #endregion #region Initialization          /// <summary> /// Initializes the <see cref="ElementsFullScreenProvider"> class. /// </see></summary> ElementsFullScreenProvider() { PopupContentContainer = Grid(); PopupContainer = Popup { Child = PopupContentContainer }; Application.Current.Host.Content.FullScreenChanged += delegate { (_lastElementController == ) ; (!Application.Current.Host.Content.IsFullScreen) { ReturnElementFromFullScreen(); } else { UpdateContentSize(); } }; } #endregion #region Public Methods BringElementToFullScreen( this UIElement element) { ) { _lastElementController = ElementController(element); _lastElementController.BringElementToFullScreen(); PopupContentContainer.Children.Add(element); PopupContainer.IsOpen = true ; } } ReturnElementFromFullScreen( UIElement element) { ReturnElementFromFullScreen(); } ReturnElementFromFullScreen() { (_lastElementController != ) { PopupContentContainer.Children.Clear(); _lastElementController.ReturnElementFromFullScreen(); false ; ; } } ToggleElementFullScreen( UIElement element) { newValue = !Application.Current.Host.Content.IsFullScreen; toggle = ; (newValue) { ) { element.BringElementToFullScreen(); toggle = ; } } else { && ReferenceEquals(element,_lastElementController.Element)) { element.ReturnElementFromFullScreen(); ; } } (toggle) { ToggleFullScreen(); } } ToggleFullScreen() { Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen; } #endregion #region Private Method UpdateContentSize() { (Application.Current != && Application.Current.Host != && Application.Current.Host.Content != ) { height = Application.Current.Host.Content.ActualHeight; width = Application.Current.Host.Content.ActualWidth;                  //if (Application.Current.Host.Settings.EnableAutoZoom) //{ //    double zoomFactor = Application.Current.Host.Content.ZoomFactor; //    if (zoomFactor != 0.0) //    { //        height /= zoomFactor; //        width /= zoomFactor; //    } //} PopupContentContainer.Height = height; PopupContentContainer.Width = width; } } #endregion } } </t></t></popup></usercontrol></contentcontrol></panel></control></frameworkelement></popup></usercontrol></contentcontrol></panel></control></frameworkelement>

 

调用的时候使用UIElement的扩展方法实现全屏：

private void button1_Click(object sender,RoutedEventArgs e)
{
 3:  SilverArea/*你希望全屏的元素*/.ToggleElementFullScreen();//调用UIElement的扩展方法
 4:  }

源码下载

本文源码下载请点击此处。主要就一个类ElementsFullScreenProvider.cs，用起来就一个函数ToggleElementFullScreen()，简单之极。