Silverlight實用竅門系列：71.Silverlight的Style

　　此文章實例基於Silverlight實用竅門系列：68.Silverlight的資源字典ResourceDictionary，如有數據源疑問請參考該文章。

　　在Silverlight中的Style相當於Html中的Css，是其一個重要的組成部分。它可以聲明於UserControl.Resources也就是本頁面資源內或者控件資源內，也可以聲明於App.Xaml內或者ResourceDictionary字典資源內。

　　Style分為內聯樣式(控件本身樣式)、頁內級別樣式(本身UserControl.Resources內樣式)、應用程序域級別樣式(App.Xaml內樣式)、ResourceDictionary字典資源

　　Style的作用順序是就近原則，比如一個控件先使用自身樣式，然后在本頁面內的資源尋找具有指定Key的樣式，如果找到就使用此樣式，沒有就找App.Xaml內樣式，再沒有就取ResourceDictionary字典資源內尋找。

　　A.其聲明為 <Style TargetType="ListBox" x:Key="listBox" BasedOn="{StaticResource fontColor}"></Style>

　　　　TargetType：針對什么控件

　　　　x:Key：此樣式的樣式名稱Key，對於不需要x:Key指定的隱式樣式，我們將會在下節講述。

　　　　BasedOn：繼承於什么樣式，注意繼承的樣式需要以BasedOn="{StaticResource fontColor}"指定上級Style的Key

 

　　B.樣式內部項以<Setter></Setter>標簽聲明，如<Setter Property="FontSize" Value="15"></Setter>

　　　　Property：作用於什么屬性

　　　　Value：設置的值是什么？

　　　　同樣其也可以用以下方式申明Setter值，在這里把整個DataTemplate模板作為一個Setter的Value,然后設置針對屬性值為ListBox的ItemTemplate屬性。

 <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>

　　最后貼出針對ListBox設置的樣式繼承於某fontColor樣式，代碼如下：

    <Application.Resources>
        <Style TargetType="ListBox" x:Key="fontColor">
            <Setter Property="Foreground" Value="Red"></Setter>
        </Style>
        <Style TargetType="ListBox" x:Key="listBox" BasedOn="{StaticResource fontColor}">
            <Setter Property="FontSize" Value="15"></Setter>
            <Setter Property="FontFamily" Value="Georgia"></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>
    </Application.Resources>

　　在看實例中使用樣式如下代碼：

    <UserControl.Resources>
        <local:ArtList x:Key="SourceList"></local:ArtList>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White"  DataContext="{StaticResource SourceList}">
        <ListBox x:Name="lbRes" ItemsSource="{Binding ArticleList}"  Style="{StaticResource listBox}"
                 Margin="0 50 0 0 "
                 HorizontalAlignment="Left" VerticalAlignment="Top"
                  Height="400"  >
        </ListBox>
    </Grid>

　　實現效果如下圖，可以看到該ListBox實現了Style中的模板樣式和字體大小等，另外還繼承了fontColor樣式中的字體顏色，如需源碼請點擊 SLStyle.zip 下載。