WPF 笔记 五 ListView ComboBox TabControl

WPF ListView

入门例子

    <Grid>
        <ListView Margin="10">
            <ListViewItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/WpfTutorialSamples;component/Images/bullet_green.png" Margin="0,0,5,0" />
                    <TextBlock>GreenTextBlock>
                StackPanel>
            ListViewItem>
            <ListViewItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/WpfTutorialSamples;component/Images/bullet_blue.png" Margin="0,0,5,0" />
                    <TextBlock>BlueTextBlock>
                StackPanel>
            ListViewItem>
            <ListViewItem IsSelected="True">
                <StackPanel Orientation="Horizontal">
                    <Image Source="/WpfTutorialSamples;component/Images/bullet_red.png" Margin="0,0,5,0" />
                    <TextBlock>RedTextBlock>
                StackPanel>
            ListViewItem>
        ListView>
    Grid>

 数据绑定

    <Grid>
        <ListView Margin="10" Name="lvDataBinding">ListView>
    Grid>

namespace WpfApp1
{
    /// 

    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {            
            InitializeComponent();
            List items = new List();
            items.Add(new User() { Name = "John Doe", Age = 42 });
            items.Add(new User() { Name = "Jane Doe", Age = 39 });
            items.Add(new User() { Name = "Sammy Doe", Age = 13 });
            lvDataBinding.ItemsSource = items;
        }
    }
    public class User
    {
        public string Name { get; set; }

        public int Age { get; set; }

        public override string ToString()
        {
            return this.Name + ", " + this.Age + " years old";
        }
    }
}

 前端使用ItemTemplate

    
        "10" Name="lvDataBinding">
            
                
                    
                        "Name: " />
                        "{Binding Name}" FontWeight="Bold" />
                        ", " />
                        "Age: " />
                        "{Binding Age}" FontWeight="Bold" />
                        " (" />
                        "{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                        ")" />
                    
                
            
        
    

 后台稍作修改

    public partial class MainWindow : Window
    {
        public MainWindow()
        {            
            InitializeComponent();
            List items = new List();
            items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com" });
            items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com" });
            items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com" });
            lvDataBinding.ItemsSource = items;
        }
    }

        public class User
        {
            public string Name { get; set; }

            public int Age { get; set; }

            public string Mail { get; set; }
        }

}

使用GridView绑定

    <Grid>
        <ListView Margin="10" Name="lvDataBinding">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
                    <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
                    <GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" />
                GridView>
            ListView.View>
        ListView>
    Grid>

 模板化单元格内容

    <Grid>
        <ListView Margin="10" Name="lvUsers">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
                    <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
                    <GridViewColumn Header="Mail" Width="150">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
                            DataTemplate>
                        GridViewColumn.CellTemplate>
                    GridViewColumn>
                GridView>
            ListView.View>
        ListView>
    Grid>

 ComboBox

入门例子

    <StackPanel Margin="10">
        <ComboBox>
            <ComboBoxItem>ComboBox Item #1ComboBoxItem>
            <ComboBoxItem IsSelected="True">ComboBox Item #2ComboBoxItem>
            <ComboBoxItem>ComboBox Item #3ComboBoxItem>
        ComboBox>
    StackPanel>

 数据绑定

    <StackPanel Margin="10">
        <ComboBox Name="cmbColors">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Fill="{Binding Name}" Width="16" Height="16" Margin="0,2,5,2" />
                        <TextBlock Text="{Binding Name}" />
                    StackPanel>
                DataTemplate>
            ComboBox.ItemTemplate>
        ComboBox>
    StackPanel>

            InitializeComponent(); cmbColors.ItemsSource = typeof(Colors).GetProperties();

TabControl

选项卡标签文本自定义显示

    <Grid>
        <TabControl TabStripPlacement="Left">
            <TabControl.Resources>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <ContentPresenter Content="{TemplateBinding Content}">
                                    <ContentPresenter.LayoutTransform>
                                        <RotateTransform Angle="270" />
                                    ContentPresenter.LayoutTransform>
                                ContentPresenter>
                            DataTemplate>
                        Setter.Value>
                    Setter>
                    <Setter Property="Padding" Value="3" />
                Style>
            TabControl.Resources>
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        TabControl>
    Grid>

控制选项卡标签外观

    <Grid>
        <TabControl Margin="10" BorderThickness="0" Background="LightGray">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Grid Name="Panel">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="10,2"/>
                                Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Panel" Property="Background" Value="LightSkyBlue" />
                                    Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Panel" Property="Background" Value="White" />
                                    Trigger>
                                ControlTemplate.Triggers>
                            ControlTemplate>
                        Setter.Value>
                    Setter>
                Style>
            TabControl.Resources>
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        TabControl>
    Grid>

另外一个例子

    <Grid>
        <TabControl Margin="10" BorderBrush="Gainsboro">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
                                    <ContentPresenter x:Name="ContentSite"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        ContentSource="Header"
                                        Margin="10,2"/>
                                Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="Background" Value="LightSkyBlue" />
                                    Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="Border" Property="Background" Value="GhostWhite" />
                                    Trigger>
                                ControlTemplate.Triggers>
                            ControlTemplate>
                        Setter.Value>
                    Setter>
                Style>
            TabControl.Resources>
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        TabControl>
    Grid>