Silverlight實用竅門系列:72.Silverlight的Implicit Style、自定義主題皮膚、系統主題皮膚


  本文實例基於Silverlight實用竅門系列:71.Silverlight的Style基礎之上。

  一、Implicit Style(隱式樣式):是不需要制定x:Key屬性的Style,它的作用於是所有指定TagetType的控件,而不需要在具體的每個控件去指定其Style="{StaticResource KeyName}"。如以下代碼的Style就沒有指定x:Key屬性,也不需要在任何ListBox控件上指定Style,會自動作用於其上:

    <Style TargetType="ListBox">
        <Setter Property="FontSize" Value="12"></Setter>
        <Setter Property="Foreground" Value="Blue"></Setter>
        <Setter Property="FontFamily" Value="Lucida Sans Unicode"></Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" >
                        <StackPanel Orientation="Horizontal" Margin="5" Width="380">
                            <TextBlock Text="{Binding ArtName}" Margin="5 10 0 0"></TextBlock>
                            <TextBox Text="{Binding ArtContent}" Name="tbName" Margin="5"></TextBox>
                            <TextBox Text="{Binding ArtAuthor}" Margin="5"></TextBox>
                            <TextBlock Text="{Binding ArtUpdateTime}" Margin="5 10 0 0"></TextBlock>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal"  Visibility="Collapsed">
                            <TextBox Text="{Binding ArtContent}" Width="280"></TextBox>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

  二、自定義主題皮膚

  在此例中我們將以上樣式放入三個不同的ResourceDictionary資源字典文件中,並且修改其定義的樣式值,然后通過后台動態加載資源字典的方式動態更換主題皮膚。具體代碼如下:

            ResourceDictionary redDic = new ResourceDictionary();
            redDic.Source = new Uri("/SLStyle;component" + Url, UriKind.RelativeOrAbsolute);
            Application.Current.Resources.MergedDictionaries.Clear();
            Application.Current.Resources.MergedDictionaries.Add(redDic);

  三、更換為系統皮膚

  本例采用Silverlight Toolkit下面的皮膚,其路徑如下:*\Silverlight\v4.0\Toolkit\Apr10\Themes\Xaml\,本文選則其中三種皮膚進行加載即可,需要引入以下一些DLL和Xaml文件,然后采用自定義主題皮膚的方式進行更換。

  最后我們來看其具體Xaml和Xaml.cs文件代碼如下:

    <Grid x:Name="LayoutRoot"   Background="White"  DataContext="{StaticResource SourceList}">
        <ListBox x:Name="lbRes" ItemsSource="{Binding ArticleList}" 
                 HorizontalAlignment="Left" VerticalAlignment="Top"
                 Margin="0 80 0 0 " Height="400"  >
        </ListBox>
        <Button Content="紅色主題" Height="23" HorizontalAlignment="Left" Margin="22,12,0,0"
                Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        <Button Content="藍色主題" Height="23" HorizontalAlignment="Left" Margin="157,12,0,0"
                Name="button2" VerticalAlignment="Top" Width="75" Click="button2_Click" />
        <Button Content="綠色主題" Height="23" HorizontalAlignment="Left" Margin="284,12,0,0"
                Name="button3" VerticalAlignment="Top" Width="75" Click="button3_Click" />
        <Button Content="系統主題1" Height="23" HorizontalAlignment="Left" Margin="22,47,0,0"
                Name="button4" VerticalAlignment="Top" Width="75" Click="button4_Click" />
        <Button Content="系統主題2" Height="23" HorizontalAlignment="Left" Margin="157,47,0,0"
                Name="button5" VerticalAlignment="Top" Width="75" Click="button5_Click" />
        <Button Content="系統主題3" Height="23" HorizontalAlignment="Left" Margin="284,47,0,0" 
                Name="button6" VerticalAlignment="Top" Width="75" Click="button6_Click" />
    </Grid>

 

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            ChangeStyle("/Styles/RedDic.xaml");
        }

        private void ChangeStyle(string Url)
        {
            ResourceDictionary redDic = new ResourceDictionary();
            redDic.Source = new Uri("/SLStyle;component" + Url, UriKind.RelativeOrAbsolute);
            Application.Current.Resources.MergedDictionaries.Clear();
            Application.Current.Resources.MergedDictionaries.Add(redDic);
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            ChangeStyle("/Styles/RedDic.xaml");
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            ChangeStyle("/Styles/BlueDic.xaml");
        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
            ChangeStyle("/Styles/GreenDic.xaml");
        }

        private void button6_Click(object sender, RoutedEventArgs e)
        {
            ChangeStyle("/SysStyles/System.Windows.Controls.Theming.SystemColors.xaml");
        }

        private void button4_Click(object sender, RoutedEventArgs e)
        {
            ChangeStyle("/SysStyles/System.Windows.Controls.Theming.TwilightBlue.xaml");
        }

        private void button5_Click(object sender, RoutedEventArgs e)
        {
            ChangeStyle("/SysStyles/System.Windows.Controls.Theming.WhistlerBlue.xaml");
        }
    }

  效果圖如下,注意在本例中沒有設置主題樣式的ListBox模板,大家可以自己顯式設置ListBox的ItemsTemplate,如需源碼請點擊 SLThemeStyle.zip 下載。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM