Какой WPF контроль или подход для этого требования?

Question

Будучи новичком в WPF, я не уверен, какой элемент управления или подход лучше всего подходит для этого требования для приложения WPF.

• Я хочу представить сводную таблицу информации, но пользователь должен иметь возможность принять решение о просмотре информации на основе: "Все время", Месяца, Недели или Дня.
• Я бы хотел, чтобы выбор опции отображался в верхней части этого раздела и отображался как TabControl
• Я не уверен, однако, является ли TabControl лучшим выбором, повторяя таблицу для каждого элемента Tab
• В целом, функционально, что бы работало, это просто переключатели сверху, однако то, что я хочу визуально, это внешний вид TabControl

Каков наилучший способ добиться внешнего вида TabControl, но с программным подходом, для которого мне не нужно повторять вещи в каждом элементе табуляции?

Например, могу ли я использовать TabControl, а затем шаблон WPF, чтобы сделать эквивалент включения в каждый элемент вкладки, но с другим входным параметром? (раньше не использовали шаблоны WPF)

Спасибо

Answer 1

Поскольку вы хотите, чтобы поведение группы составляло RadioButton s, и вы хотели бы видеть TabItem, вы должны использовать RadioButton элементы управления и стилизовать их так, чтобы они выглядели как TabItem элементы управления. Вот очень простой пример:

<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 - это место, куда вы бы поместили сводную таблицу.

Answer 2

Грег, я полагаю, группировка сетки будет самым идеальным контролем вашего требования. Либо вы можете настроить сетку данных, как описано в следующей статье. Но это займет больше времени, чтобы все исправить.

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

или вы можете использовать коммерческий элемент управления группировкой сетки WPF, который будет соответствовать вашим требованиям.

Answer 3

Каков наилучший способ получить внешний вид TabControl, но с программным подходом, для которого мне не нужно повторять вещи в каждом элементе вкладки?

Использовать TabControl.Пусть каждый TabItem содержит CollectionViewSource на основе одного и того же базового набора данных, но с другим фильтром.Используйте DataTemplate для представления CollectionViewSource.

Фильтрация требует некоторого кода, но вот демонстрационная версия только для 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>