Silverlight實用竅門系列:Style
在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 下載。
原文鏈接:http://www.cnblogs.com/chengxingliang/archive/2012/07/02/2558112.html
【編輯推薦】