2012111521433878  
1.首先來說一下SemanticZoom控制項是什麼?

 

SemanticZoom控制項可以讓用戶縮放具有相同內容的兩個不同視圖。其中有一個是主視圖。另外一個視圖可以讓用戶進行快速導航。例如,當用戶查看位址簿時,用戶可以放大某個字母以查看與該字母相關的內容。還有其他等等的一些例子。

 

2.如何使用SemanticZoom控制項

 

SemanticZoom控制項需要包含兩個其它控制項(GridView或ListView):一個控制項提供放大視圖,另外一個提供縮小視圖。

 

View Code
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<!-- 在這裏放置GridView(或ListView)以表示放大視圖 -->
<GridView/>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<!-- 在這裏放置GridView(或ListView)以表示縮小視圖 -->
<GridView/>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>

 

3.示例如下
一個省市關聯。外視圖為省份的清單。內部為城市清單的相關資訊。


2012111521433878  

2012111522231358  

此為兩個圖的效果。

 

接下來我們來看一下數據源。

 

Province[] Pros = {
new Province{ProID=1,Name="山東省"},
new Province{ProID=2,Name="廣東省"},
new Province{ProID=3,Name="湖北省"},
new Province{ProID=4,Name="廣西省"}
};

 

////然後再添加幾個省下面對應的城市的,隨便來幾個
City[] Citys = {
new City{CityID=11,ProID=1,CityName="威海市"},
new City{CityID=12,ProID=1,CityName="煙台市"},
new City{CityID=13,ProID=1,CityName="濟南市"},
new City{CityID=21,ProID=2,CityName="廣州市"},
new City{CityID=22,ProID=2,CityName="深圳市"},
new City{CityID=31,ProID=3,CityName="武漢市"},
new City{CityID=32,ProID=3,CityName="武昌市"},
new City{CityID=33,ProID=3,CityName="漢口市"},
new City{CityID=34,ProID=3,CityName="漢陽市"},
new City{CityID=35,ProID=3,CityName="宜昌市"},
new City{CityID=41,ProID=4,CityName="西寧市"},
new City{CityID=42,ProID=4,CityName="桂林市"}
};

 

先准備數據,接下來通過linq將數據進行轉換。

 

// 將省份和城市進行關聯,對數據源進行分組,此處用到linq
var res = (from p in Pros
join c in Citys on p.ProID equals c.ProID
into g
select new
{
p.Name,
CityList=g.ToList()
}).ToList<dynamic>();

 

4然後接下來要用到Windows.UI.Xaml.Data命名空間下的CollectionViewSource。

 

CollectionViewSource是專為數據綁定有UI視圖互動而設的,尤其是對於要實現分組的情況下,更需要它。CollectionViewSource的幾個重要的屬性:

 

Source是設置分組後的數據源,數據源就是通過上面的Linq進行轉換處理。

 

IsSourceGrouped屬性指示是否允許分組,我試過只有設置允許分組才能看到前面的截圖效果。

 

ItemsPath是分組後,組內部所包含清單的屬性路徑,即上面Linq中CityList.可以查看它的類型PropertyPath.

 

View屬性就是獲取其視圖數據.

 

// 實例化CollectionViewSource對象
CollectionViewSource cvs = new CollectionViewSource();
cvs.IsSourceGrouped = true; //支援分組
// 分組後集合項的路徑,本例中為CityList
cvs.ItemsPath = new PropertyPath("CityList");
// 設置數據來源,就是我們剛才分好組的動態清單
cvs.Source = res;
// 分別對兩個視圖進行綁定
gvList.ItemsSource = cvs.View.CollectionGroups;
lvlist.ItemsSource = cvs.View;

 

這就是縮略視圖綁定數據 其中gvList是GridView,綁定的是外部視圖。lvlist是ListView 綁定內部視圖。
當然如果對CollectionViewSource還是不太熟悉,那就多調試幾次。

 

foreach (var item in cvs.View.CollectionGroups)
{
ICollectionViewGroup vg = (ICollectionViewGroup)item;
dynamic ent = vg.Group as dynamic;
}

 

可以通過這個循環。總之我也不太清楚,不過多試幾次多用幾次就好了。

 

5.介紹一下剛學習到的一個值轉換器。

 

首先需要定義轉換器類,轉換器要實現IValueConverter介面。其中Convert方法用於把綁定模型的屬性類型轉換為被綁定UI元素的數據類型,value為轉換前數據把轉換後數據以傳回值形式返回。ConvertBack方法用於當TwoWay綁定的時候UI值發生變化反向修改Model屬性值的時候做轉換。如果不做TwoWay綁定可以簡單拋出「未實現異常」即可。

 

namespace Zoom.Common
{
public class StrUtils : IValueConverter
{

 

public object Convert(object value, Type targetType, object parameter, string language)
{
///此處value為Model中的數據,傳回值為UI中的數據
return string.Format("中國 :{0}", value);
}

 

public object ConvertBack(object value, Type targetType, object parameter, string language)
{
///此處是有UI到Model中的轉換
return null;
}
}
}




在Xaml中進行調用

 

首先引用命名空間 xmlns:StrConverter="using:Zoom.Common"

 

<Page.Resources>
<StrConverter:StrUtils x:Name="strForMat"/>
<Style x:Key="gvStyle" TargetType="GridViewItem">
<Setter Property="Background" Value="YellowGreen"></Setter>
</Style>
</Page.Resources>

 

然後在Page.Resources中調用此類,並做標識

 

<TextBlock Text="{Binding Path=Group.Name,Converter={StaticResource strForMat}}" FontSize="25" FontFamily="宋體"></TextBlock>

 

再在綁定Model的UI控制項上進行轉換即可。
 
From:CNBLOGS
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()