Динамически создавайте элементы вкладок и их содержимое с помощью Orchestra / Catel

#tabs #catel

#вкладки #catel

Вопрос:

Я пытаюсь создать интерфейс с вкладками, используя Orchestra / Catel. Я загружаю определения вкладок в класс TabInfo. Они работают нормально — создается интерфейс с вкладками и правильными описаниями вкладок. В содержимом для каждой вкладки я хочу создать список кнопок, который снова загружается в класс ButtonInfo. При выборе вкладки свойство SelectedTab используется для выбора правильного списка кнопок (ShowButtons).

Я отследил программу, и когда я нажимаю на вкладку, правильный набор кнопок находится в ShowButtons, но в содержимом вкладки ничего не отображается. Я заставил это работать в обычной программе MVVM, но без вкладок. Я использовал listview для отображения своих вкладок и ItemsControl для отображения кнопок.

Ниже приведен мой код XAML для вкладок и моя логика SelectedTab для нажатия кнопок.«`

 <Grid>
    <orccontrols:TabControl LoadTabItems="LazyLoading" ItemsSource="{Binding TabInfo}" SelectedItem="{Binding SelectedTab}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding TabDesc}"/>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding ShowButtons}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Vertical" IsItemsHost="True"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Content="{Binding ButtonDesc}"
                                    MinWidth="150" 
                        Height="30" 
                        FontSize="12" 
                        FontWeight="Bold" 
                        Margin="0,15,25,10" 
                        Padding="5,1">
                                <Button.Style>
                                    <Style>
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding OracleJob}" Value="0">
                                                <Setter Property="Button.Background" Value="DarkSalmon" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Button.Style>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </orccontrols:TabControl>
</Grid>
  

И код для заполнения ShowButtons:

 public void OnSelectedTabChanged()
    {
        int _selectTab = SelectedTab.TabKey;
        var _showButtons = ButtonInfo.Where(i => i.ButtonTab == _selectTab);
        ObservableCollection<ButtonRecord> _btn = new ObservableCollection<ButtonRecord>(_showButtons);
        ShowButtons = _btn;
    }
  

Любая помощь приветствуется. Я новичок в Orchestra / Catel, поэтому, вероятно, мне не хватает лучшего способа сделать это.

Ответ №1:

Я рекомендую разделить проблему с Orchestra / Catel. Orchestra позволяет вам предоставлять представление в виде оболочки, но это представление может существовать само по себе (единственное, что делает Orchestra, это помещает его в правильное местоположение внутри оболочки). Делая эту проблему не связанной с Orchestra, нам немного легче ее решить.

Далее я рекомендую заглянуть в документы Catel. Существует полный пример того, как отобразить оболочку с вкладками с закрывающимися кнопками вкладок, см. https://docs.catelproject.com/vnext/tips-tricks/mvvm/using-tabbed-interface-with-mvvm

Комментарии:

1. Спасибо! Я взглянул на пример, и это было действительно слишком для того, что я пытался сделать. Я поиграл с этим и обнаружил, что все, что мне нужно было сделать, чтобы это работало так, как хотелось, это создать новую модель — старую модель вкладки с новым свойством списка кнопок, которые принадлежат этой вкладке. Приведенный выше xaml работает отлично. Еще раз спасибо за вашу помощь.