Sử dụng theme trong Silverlight
I.Introduction:
– Việc tùy chỉnh theme trong một ứng dụng chắc hẳn là một vấn đề rất đáng được quan tâm trong mỗi chúng ta, hiển nhiên là sử dụng theme mặc định là tốt rồi, những sẽ tốt hơn nếu một ứng dụng có thể có nhiều theme
– Trong bài này mình xin chia sẻ cách sử dụng Theme trong Silverlight.
II.Creating Project And Coding :
– Mở Visual Studio 2010 lên và tạo mới Silverlight Application.
– Để Sử dụng Theme Control chúng ta phải Add thư viện System.Windows.Controls.Theming vào Project. Chọn Right Click vào References và add thư viện vào :
– Add thêm các theme vào project :
– Bây giờ chúng ta tạo một UserControl để khi thay đổi theme thì UserControl sẽ thay đổi theo, chọn Right Click vào Silverlight Project –> Add New Item –> Silverlight UserControl:
-Tiếp theo chúng ta thiết kế giao diện cho ứng dụng, gồm có một Combobox và sử dụng UserControl vừa tạo:
Chúng ta có Code XAML của MainPage như sau :
1: <UserControl x:Class="Theme.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: mc:Ignorable="d"
7: d:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" xmlns:my="clr-namespace:Theme" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
8:
9: <Grid x:Name="LayoutRoot" Background="White">
10: <Border Name="DynamicPanel" BorderThickness="0">
11: <my:Customize HorizontalAlignment="Left" Margin="12,74,0,0" x:Name="customize1" VerticalAlignment="Top" Width="376" Height="142" />
12: </Border>
13: <ComboBox Height="23" HorizontalAlignment="Left" Margin="103,45,0,0" Name="combo_Theme" VerticalAlignment="Top" Width="244" >
14: <ComboBox.ItemTemplate>
15: <DataTemplate>
16: <TextBlock Text="{Binding Name}"/>
17: </DataTemplate>
18: </ComboBox.ItemTemplate>
19: </ComboBox>
20: <sdk:Label Content="Choose theme: " Height="28" HorizontalAlignment="Left" Margin="12,46,0,0" Name="label1" VerticalAlignment="Top" Width="101" />
21: </Grid>
22: </UserControl>
Tiếp theo chúng ta xây dựng một Cơ Sở Dữ Liệu đơn giản chứ tên các Theme để đưa vào Combobox:
1: using System;
2: using System.Net;
3: using System.Windows;
4: using System.Windows.Controls;
5: using System.Windows.Documents;
6: using System.Windows.Ink;
7: using System.Windows.Input;
8: using System.Windows.Media;
9: using System.Windows.Media.Animation;
10: using System.Windows.Shapes;
11: using System.Collections.Generic;
12: using System.Windows.Controls.Theming;
13:
14: namespace Theme
15: {
16: public class MyThemes
17: {
18: public string Name { get; set; }
19: public ContentControl Theme { get; set; }
20: public List<MyThemes> GetTheme()
21: {
22: List<MyThemes> theme = new List<MyThemes>
23: {
24: new MyThemes{Name = "Bubble Creme",Theme = new BubbleCremeTheme()},
25: new MyThemes{Name = "Bureau Black",Theme = new BureauBlackTheme()},
26: new MyThemes{Name = "Bureau Blue",Theme = new BureauBlueTheme()},
27: new MyThemes{Name = "Expression Dark",Theme = new ExpressionDarkTheme()},
28: new MyThemes{Name = "Expression Light",Theme = new ExpressionLightTheme()},
29: new MyThemes{Name = "Rainier Orange",Theme = new RainierOrangeTheme()},
30: new MyThemes{Name = "Rainier Purple",Theme = new RainierPurpleTheme()},
31: new MyThemes{Name = "Shiny Blue",Theme = new ShinyBlueTheme()},
32: new MyThemes{Name = "ShinyRed",Theme = new ShinyRedTheme()},
33: new MyThemes{Name = "Twilight Blue",Theme = new TwilightBlueTheme()},
34: new MyThemes{Name = "Whistler Blue",Theme = new WhistlerBlueTheme()}
35: };
36: return theme;
37: }
38: }
39: }
Bây giờ quay lại xử lý cho Mainpage.xaml.cs, chúng ta sẽ Load dữ liệu vào Combobox thông qua thuộc tính ItemSource, và tạo sự kiên SectionChaged để khi thay đổi Item thì Theme sẽ thay đổi theo, như đoạn code phía dưới:
1: using System;
2: using System.Collections.Generic;
3: using System.Linq;
4: using System.Net;
5: using System.Windows;
6: using System.Windows.Controls;
7: using System.Windows.Documents;
8: using System.Windows.Input;
9: using System.Windows.Media;
10: using System.Windows.Media.Animation;
11: using System.Windows.Shapes;
12:
13: namespace Theme
14: {
15: public partial class MainPage : UserControl
16: {
17: MyThemes MyThemes = new MyThemes();
18: public MainPage()
19: {
20: InitializeComponent();
21: combo_Theme.ItemsSource = MyThemes.GetTheme();
22: combo_Theme.SelectionChanged += new SelectionChangedEventHandler(combo_Theme_SelectionChanged);
23: }
24:
25: void combo_Theme_SelectionChanged(object sender, SelectionChangedEventArgs e)
26: {
27: ContentControl theme = ((sender as ComboBox).SelectedItem as MyThemes).Theme;
28: theme.Content = new Customize();
29: DynamicPanel.Child = null;
30: DynamicPanel.Child = theme;
31: }
32: }
33: }
Chạy ứng dụng vào xem kết quả:
/*Web is beautiful*/
Pham Nguyen 