【问题标题】:How to remove the Close Tabs in Caliburn Micro MVVM application?如何删除 Caliburn Micro MVVM 应用程序中的关闭选项卡?
【发布时间】:2017-08-24 16:31:46
【问题描述】:

我使用 Caliburn Micro 在 MVVM 中构建了一个应用程序。我目前在我的所有选项卡上都有 closetab,它会关闭除前三个选项卡之外的所有选项卡,即主页、付款、注释,但是,我希望它不在前三个选项卡上显示关闭选项卡图标,如图所示我的 AppViewModel 代码:

<TabControl x:Name="Items" Grid.Row="1" Visibility="{Binding Visibility, Converter={StaticResource boolToVis}}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <!-- The Tab Names Binding with DisplayName-->
                    <TextBlock Text="{Binding DisplayName}" />
                    <!-- The Tab Close Icon-->
                    <Button Content="x" x:Name="CloseTab" cal:Message.Attach="CloseTab" Style="{DynamicResource appTabCloseButton}" Visibility="{Binding Visibility, Converter={StaticResource boolToVis}}"/>
                </StackPanel>
            </DataTemplate>
        </TabControl.ItemTemplate>
    </TabControl>

关闭标签的 AppViewModel 代码:

public void CloseTab()
{
    if(ActiveItem.DisplayName == "Home" || ActiveItem.DisplayName == "Payment" || ActiveItem.DisplayName == "Notes")
    {
      MessageBox.Show("This Tab Cannot Be closed.","Permanent Tab");

    } else {
        DeactivateItem(ActiveItem, close: true);
    }  
}

我的 boolToVis 的 App.xaml 代码:

<Application x:Class="WPF.Test.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPF.Test.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <local:Bootstrapper x:Key="bootstrapper" />
                    <BooleanToVisibilityConverter x:Key="boolToVis" />
                </ResourceDictionary>
                <ResourceDictionary>
                    <ResourceDictionary.MergedDictionaries>
                        <ResourceDictionary Source="/Global.WPF.UserControls;component/Resources/brushes.xaml" />
                        <ResourceDictionary Source="/Global.WPF.UserControls;component/Resources/CommonControls.xaml" />
                        <ResourceDictionary Source="/Global.WPF.UserControls;component/Resources/menuItems.xaml" />
                        <ResourceDictionary Source="pack://application:,,,/Fluent;Component/Themes/Generic.xaml" />
                    </ResourceDictionary.MergedDictionaries>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

最后是绑定的可见性:

bool _visibility;
public bool Visibility
{
    get { return _visibility; }
    set
    {
        _visibility = value;
        NotifyOfPropertyChange("Visibility");
    }
}

我很高兴有任何建议,因为我完全迷失了!

【问题讨论】:

  • 将按钮包裹在防护面板中。如果尚不存在 bool CanClose 属性,请创建一个。当值为 false 时,绑定到布尔属性的面板会自动隐藏

标签: c# wpf mvvm tabs caliburn.micro


【解决方案1】:

创建一个可用于显示/隐藏按钮的保护面板。

<TabControl x:Name="Items" Grid.Row="1" Visibility="{Binding Visibility, Converter={StaticResource boolToVis}}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <!-- The Tab Names Binding with DisplayName-->
                <TextBlock Text="{Binding DisplayName}" />
                <Border x:Name="CanCloseTab">
                    <!-- The Tab Close Icon-->
                    <Button Content="x" x:Name="CloseTab" cal:Message.Attach="CloseTab" Style="{DynamicResource appTabCloseButton}" />
                </Border>
            </StackPanel>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

然后创建一个守卫属性

public bool CanCloseTab {
    get { 
        return !(ActiveItem.DisplayName == "Home" 
                 || ActiveItem.DisplayName == "Payment" 
                 || ActiveItem.DisplayName == "Notes");
    }
}

按照惯例,视图应该自动将CanCloseTab 属性绑定到面板的可见性(边框),这样当它为假时就不会显示。如果面板不存在,guard 属性也会自动禁用按钮。

现在应该允许为了简单起见重构 CloseTab 方法。

public void CloseTab() {
    if(CanCloseTab) {
        DeactivateItem(ActiveItem, close: true);
    }  
}

【讨论】:

  • 您好,感谢您的帮助。它不再在选项卡上显示 X 图标,但会留下一个圆圈。它以前是一个带有圆圈和 X 的选项卡。我认为这是需要隐藏的样式动态资源?
  • @JasonB 可能是一种风格。您显示的代码没有表明哪个组件可能是导致圆圈的原因。
  • 我现在会处理它。当然离我所在的地方更远,所以我已经标记了你的答案。样式是全局的,所以我无法触摸它们,所以我认为我只需要查看可见性。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-05-12
  • 1970-01-01
相关资源
最近更新 更多