Question

我想要实现的目标，在考虑它时似乎非常简单。

我有一个MVVM应用程序，我有一个窗口有多个页面/视图，在顶部我有一个按钮的项目控件，可以带你到各个页面。现在，我希望当前的页面按钮能够改变颜色并在页面上保持这种状态。

以下是我的一些代码：

<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>

我被告知数据触发器可能会有所帮助，但我不知道如何将其实现为itemscontrol。我是否必须将其分开，手动显示所有按钮，然后根据名称或其他内容进行设置？

由于

Answer 1

WPF已经有一个控件来执行所谓的TabControl行为。它可以设置为看起来像按钮而不是常规标签，只需修改control template for tab items即可。下面是一些示例代码，使选定的选项卡变为红色。

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; }
    }
}

WPF页面菜单更改按钮颜色

1 个答案: