WPF中Expander控件样式,ListBox的样式(带checkbox)恢复

Expander控件样式:

 <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButton">
            <Border Name="Border"  CornerRadius="2,0,0,0" Background="Transparent" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0">
                <Path  Name="Arrow" Fill="{StaticResource GlyphBrush}" HorizontalAlignment="Center" VerticalAlignment="Center"  Data="M 0 0 L 4 4 L 8 0 Z"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
                </Trigger>
                <!--<Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
                </Trigger>-->
                <Trigger Property="IsChecked" Value="true">
                    <Setter TargetName="Arrow" Property="Data" Value="M 0 4 L 4 0 L 8 4 Z" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                    <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                    <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                    <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        
        <Style TargetType="Expander">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Expander">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Name="ContentRow" Height="0"/>
                            </Grid.RowDefinitions>
                            <Border  Name="Border" Grid.Row="0" BorderThickness="1"  CornerRadius="2,2,0,0" >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="20" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton  IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                            OverridesDefaultStyle="True" Template="{StaticResource ExpanderToggleButton}"  Background="{StaticResource NormalBrush}" />
                                    <ContentPresenter Grid.Column="1"  Margin="4"  ContentSource="Header"  RecognizesAccessKey="True" />
                                </Grid>
                            </Border>
                            <Border Name="Content" Grid.Row="1" BorderThickness="1,0,1,1" CornerRadius="0,0,2,2" >
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter TargetName="ContentRow" Property="Height" Value="{Binding ElementName=Content,Path=DesiredHeight}" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                                <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

 

 

ListBox的样式(带checkbox)

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="Padding" Value="3"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30"/>
                            <ColumnDefinition Width="0.941*"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="fillColor" IsHitTestVisible="False" Opacity="0" RadiusY="5" RadiusX="5"
                                        Grid.ColumnSpan="2" Grid.Column="1" Margin="0">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFADE23B" Offset="0"/>
                                    <GradientStop Color="#FF588F01" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle x:Name="fillColor2" IsHitTestVisible="False" Opacity="0" RadiusY="5" RadiusX="5"
                                        Grid.ColumnSpan="2" Grid.Column="1" Margin="0">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF6E9F04" Offset="0"/>
                                    <GradientStop Color="#FF436C00" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Content="{TemplateBinding Content}" Margin="0" Grid.Column="1"/>
                        <Rectangle x:Name="FocusVisualElement" RadiusY="5" RadiusX="5" StrokeThickness="1" Visibility="Collapsed" Grid.ColumnSpan="2">
                            <Rectangle.Stroke>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF6E9F04" Offset="0"/>
                                    <GradientStop Color="#FF436C00" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Stroke>
                        </Rectangle>
                        <CheckBox VerticalAlignment="Center" HorizontalAlignment="Center"
                                      IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ListBoxAsset" TargetType="{x:Type ListBox}">
        <Setter Property="Padding" Value="1" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Grid>
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <ScrollViewer x:Name="ScrollViewer" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" BorderThickness="0" Padding="0">
                                <ItemsPresenter />
                            </ScrollViewer>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

 

 

前端界面:

 <Expander Margin="30,0,0,0" IsExpanded="True">
                    <Expander.Header>
                        <TextBlock Text="设备类型" Foreground="White"/>
                    </Expander.Header>
                    <Expander.Content>
                        <ListBox Margin="10,0,0,0" VerticalAlignment="Stretch" Name="AssetListBox" ItemsSource="{Binding }"
                                 Style="{StaticResource ListBoxAsset}" SelectionChanged="AssetListBox_SelectionChanged">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Margin="2" Foreground="White" Text="{Binding Name}"/>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </Expander.Content>
                </Expander>

 

后台cs代码:建立一个类,绑定数据

 public class Test
    {
        public string Name { get; set; }
        public int ID { get; set; }
    }

 

private void UserControl_Loaded(object sender, RoutedEventArgs e)        

{     

         List<Test> list = new List<Test>();
            for (int i = 0; i < 10; i++)
            {
                Test info = new Test();
                info.ID = i;
                info.Name = i.ToString();
                list.Add(info);
            }
            AssetListBox.DataContext = list;

 }

如下图所示:

 

posted @ 2013-09-04 14:57  sky300  阅读(3152)  评论(0编辑  收藏  举报