0

考えてみればとてもわかりやすいものを実現したいと思っています。

複数のページ/ビューを含むウィンドウがあり、上部にさまざまなページに移動するボタンの項目コントロールがあります。ここで、現在のページ ボタンの色を変更し、ページにいる間はそのままにしておきたいと思います。

これが私のコードの一部です：

<DockPanel>
    <Border DockPanel.Dock="Top" BorderBrush="#FAAA" BorderThickness="0,0,0,3" Background="#FDDD">
        <ItemsControl ItemsSource="{Binding PageViewModels}">
            <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Width="75"
                            Height="30"
                            Content="{Binding Name}"
                            Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                            CommandParameter="{Binding }"
                            Style="{StaticResource MenuButton}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>

    <ContentControl Content="{Binding CurrentPageViewModel}" />
</DockPanel>

データトリガーが役立つかもしれないと言われましたが、それをアイテムコントロールに実装する方法がわかりません。それを分解し、すべてのボタンを手動で表示してから、名前などに基づいて設定する必要がありますか?

ありがとう

4

1 に答える 1

0

WPF には、説明した動作を行う TabControlというコントロールが既にあります。必要に応じて、通常のタブの代わりにボタンのようにスタイルを設定できます。タブ項目のコントロール テンプレートを変更するだけです。以下は、選択したタブを赤くするサンプルコードです。

XAML:

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>

        <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

        <SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

        <SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

        <SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid>
                            <Border 
                                Name="Border"
                                Margin="0,0,-4,0" 
                                Background="{StaticResource LightBrush}"
                                BorderBrush="{StaticResource SolidBorderBrush}" 
                                BorderThickness="1,1,1,1" 
                                CornerRadius="2,12,0,0" >
                                <ContentPresenter x:Name="ContentSite"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    ContentSource="Header"
                                    Margin="12,2,12,2"
                                    RecognizesAccessKey="True"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="100" />
                                <Setter TargetName="Border" Property="Background" Value="Red" />
                                <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                            </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>

    </Window.Resources>

    <StackPanel>

        <TabControl 
            ItemsSource="{Binding Path=PageViewModels}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Content}" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>

    </StackPanel>

</Window>

コードビハインド:

using System.Collections.Generic;
using System.Windows;

namespace WpfApplication
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = this;
        }

        public List<PageViewModel> PageViewModels
        {
            get
            {
                return new List<PageViewModel>() { new PageViewModel() { Header = "A", Content = "AAA" }, new PageViewModel { Header = "B", Content = "BBB" } };
            }
        }
    }

    public class PageViewModel
    {
        public string Header { get; set; }

        public string Content { get; set; }
    }
}
于 2013-07-11T17:59:42.470 に答える