代码之家 › 专栏 › 技术社区 › Greg

该要求的WPF控制或方法是什么?

tabcontrol wpf .net c#

Greg · 技术社区 · 14 年前

我想提供一个信息摘要表,但是用户应该能够根据“所有时间”、月、周或日来决定查看信息。
我想在视觉上有选择的选项出现在这一节的顶部,并有它作为一个选项卡控件出现
但是,我不确定TabControl是否是最好的选择为每个Tab项重新重复表
所以从整体功能上来说,只需要顶部的单选按钮就行了,但是我想要的是一个TabControl外观

例如,我会使用一个TabControl,然后使用一个WPF模板来做每个Tab项中的include,但是使用不同的输入参数吗?(以前没有使用过WPF模板)

谢谢

3 回复 | 直到 14 年前

user128300 user128300 14 年前

RadioButton 你想要一个 TabItem 单选按钮 控制。下面是一个非常简单的例子:

alt text

<Window x:Class="TabTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border x:Name="tabBorder" BorderThickness="1" BorderBrush="Black"
                                Margin="0,0,-4,0"
                                CornerRadius="2,12,0,0"
                                Background="White"
                                SnapsToDevicePixels="True">
                            <ContentPresenter                                 
                                Margin="12,2,12,2"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Left"
                                RecognizesAccessKey="True"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100" />
                                <Setter TargetName="tabBorder" Property="Background" Value="LightBlue" />
                                <Setter TargetName="tabBorder" Property="BorderThickness" Value="1,1,1,0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Margin="4">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="0,0,0,-1" Panel.ZIndex="1">
            <RadioButton>All Time</RadioButton>
            <RadioButton IsChecked="True">Month</RadioButton>
            <RadioButton>Week</RadioButton>
            <RadioButton>Day</RadioButton>
        </StackPanel>
        <Border Grid.Row="1" Background="LightBlue" 
                BorderThickness="1" BorderBrush="Black"
                SnapsToDevicePixels="True">
            <Button Margin="10" Grid.Row="1">This is a test</Button>
        </Border>
    </Grid>
</Window>

Button 是你放总结表的地方。

Karthik Mahalingam 14 年前

格雷格,我想,分组网格将是最理想的控制您的需求。您可以自定义datagrid,如下文所述。但这需要更多的时间来把事情做好。

http://blog.smoura.com/wpf-toolkit-datagrid-part-iv-templatecolumns-and-row-grouping/

或者您可以使用符合您需求的商业WPF网格分组控件。

Robert Rossney 14 年前

实现TabControl外观的最佳方法是什么,但使用的编程方法不必在每个Tab项中重复操作?

TabControl . 各有各的 TabItem 包含 CollectionViewSource 基于相同的底层数据集合,但使用不同的筛选器。使用 DataTemplate 集合视图源 .

过滤需要某种代码,但这里有一个仅用于XAML的演示,用于排序:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase">
  <Page.Resources>
    <XmlDataProvider x:Key="Data">
      <x:XData>
        <Data xmlns="">
          <Item Date="2010-01-01" Value="January"/>
          <Item Date="2010-02-01" Value="February"/>
          <Item Date="2010-03-01" Value="March"/>
          <Item Date="2010-04-01" Value="April"/>
          <Item Date="2010-05-01" Value="May"/>
          <Item Date="2010-06-01" Value="June"/>
          <Item Date="2010-07-01" Value="July"/>
          <Item Date="2010-08-01" Value="August"/>
          <Item Date="2010-09-01" Value="September"/>
        </Data>
      </x:XData>
    </XmlDataProvider>
    <CollectionViewSource x:Key="ByDate" Source="{Binding Source={StaticResource Data}, XPath=Data/Item}">
      <CollectionViewSource.SortDescriptions>
        <scm:SortDescription PropertyName="@Date"/>
      </CollectionViewSource.SortDescriptions>
    </CollectionViewSource>
    <CollectionViewSource x:Key="ByValue" Source="{Binding Source={StaticResource Data}, XPath=Data/Item}">
      <CollectionViewSource.SortDescriptions>
        <scm:SortDescription PropertyName="@Value"/>
      </CollectionViewSource.SortDescriptions>
    </CollectionViewSource>
    <DataTemplate DataType="{x:Type CollectionViewSource}">
      <Border Margin="5" BorderBrush="DodgerBlue" BorderThickness="1" CornerRadius="4">
        <DockPanel Margin="5">
          <Label DockPanel.Dock="Top">This is here to show how you can make the layout of your TabItems complex without repeating yourself.</Label>
          <ListBox DockPanel.Dock="Top" x:Name="Items" ItemsSource="{Binding}" DisplayMemberPath="@Value" SelectedValuePath="@Value"/>
          <DockPanel>
            <Label>Selected item: </Label>
            <Label Content="{Binding ElementName=Items, Path=SelectedValue}"/>
          </DockPanel>
        </DockPanel>
      </Border>
    </DataTemplate>
  </Page.Resources>
  <Grid>  
    <TabControl>
       <TabItem Header="By date" Content="{StaticResource ByDate}"/>
       <TabItem Header="By value" Content="{StaticResource ByValue}"/>
    </TabControl>
  </Grid>
</Page>