Silverlight TabControl和Accordion控件使用介紹

1、引入Silverlight Toolkit中控件Controls的引用

2、頁面中添加控件

<sdk:TabControl  Style="{StaticResource tabStyle}" HorizontalAlignment="Left" Margin="0" x:Name="tabControl1" Width="276" Height="400" VerticalAlignment="Top">

                            <!--第一個TabItem-->

                            <sdk:TabItem Style="{StaticResource tabItemStyle}" Header="    防 汛 搶 險 " x:Name="tabItem2" Width="122" HorizontalAlignment="Center" VerticalAlignment="Center">

                                <Grid Width="269" Margin="0" HorizontalAlignment="Left" Height="362" VerticalAlignment="Top">

                                    <layoutToolkit:Accordion x:Name="accordion" Margin="0,1,3,3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" FontSize="14.667" BorderBrush="DarkGray" Width="266">

                                        <layoutToolkit:AccordionItem Header="倉庫物資" IsSelected="False" Cursor="Hand" VerticalAlignment="Center">

                                            <layoutToolkit:AccordionItem.Content>

                                                <Grid>

                                                </Grid>

                                            </layoutToolkit:AccordionItem.Content>

                                        </layoutToolkit:AccordionItem>

                                        <layoutToolkit:AccordionItem Header="搶險隊伍" IsSelected="False">

                                                <Grid Width="269" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="292">

                                        <layoutToolkit:AccordionItem Header="防汛責任人">

                                                <Grid Width="272" Margin="0" HorizontalAlignment="Left" Height="300" VerticalAlignment="Top">

                                    </layoutToolkit:Accordion>

                                </Grid>

                            </sdk:TabItem>

                            <!--第二個TabItem-->

                            <sdk:TabItem  Style="{StaticResource tabItemStyle}" Header=" 預 警 短 信 發 送" x:Name="tabItem1" FontFamily="Microsoft YaHei" FontSize="13.333" VerticalAlignment="Center" Cursor="Hand" Width="146">

                                <Grid>

                        </sdk:TabControl>

3、效果如下圖：