동적으로 런타임에 탭 컨트롤 컨텍스트에 단추 추가

Question

MVVM 환경에서 탭 항목에 내용을 추가하려고합니다. 내 탭 항목이 동적으로 생성되며 제대로 작동합니다. 이 시도를 단순화하기 위해 문자열을 키 (탭 항목 헤더) 및 목록 (현재 버튼 (mvvm을 중단하고 mvvm 패턴을 깨뜨릴 생각에서 벗어나고 싶다는 것을 알고 있습니다))으로 저장하는 사전이 있습니다. 내 단추가 해당 그리드 행/열의 내 항목 컨텍스트에 배치되기를 원합니다. 데이터 사원 (어떻게 내 사전 항목 키를 내 탭 항목 머리글 매핑 된) 볼 수 있지만 목록에서 단추 개체를 추출하는 방법을 모르겠습니다. 값에 바인딩하면 단추 속성이 아닌 목록 속성이 반환됩니다.

첫 번째 질문은 런타임에 목록에 저장된 탭 컨트롤 컨텍스트에 단추를 배치하는 방법입니다. 내 두 번째 질문은 어떤 그리드 행/열에 가야 결정하는 방법이 될 것입니다. 사실 (MVVM MVVM을 만들고 데이터 템플릿 트리거를 사용하고 싶습니다하지만 지금은 최소 너비/높이를 저장하도록 설정했습니다 그리드의 행/열은이에 포함되어야

다음

내가 지금까지 가지고있는 작업은 다음과 같습니다.

<TabControl Margin="10,10,10,26" Grid.Column="0" ItemsSource="{Binding FUGU}"> 
     <TabControl.ItemTemplate> 
      <DataTemplate> 
       <TextBlock Text="{Binding Key}" /> 
      </DataTemplate> 
     </TabControl.ItemTemplate> 

     <TabControl.ContentTemplate> 
      <DataTemplate> 

      </DataTemplate> 
     </TabControl.ContentTemplate> 
... 
</TabControl> 

C#보기 모델

public Dictionary<string, List<Button>> FUGU{ get; set; } 
//inside constructor 
foreach(var item in Items) 
     { 
      if (!Categories.Contains(item.Category)) 
      { 
       Categories.Add(item.Category); 
       List<Button> buttons = new List<Button>(); 
       int row = 0; 
       int col = 0; 
       foreach (var i in Items.FindAll(x => x.Category == item.Category)) 
       { 
        Button btn = new Button() { Content = i.Name, Tag = i.SKU, MinWidth=col, MinHeight=row }; 
        buttons.Add(btn); 
        if(row==10) 
        { 
         row = 0; 
         col += 1; 
        } 
       } 
       FUGU.Add(item.Category, buttons); 
      } 

     } 

편집 : 그래서 내가 몇 가지 변경을하고 만들었습니다 개체를 만들고 ItemsControl 클래스를 찾았습니다.

foreach(var item in Items) 
     { 
      if (!Categories.Contains(item.Category)) 
      { 
       Categories.Add(item.Category); 


       List<POSButtonInfo> btnInfoLst = new List<POSButtonInfo>(); 
       int row = 0; 
       int col = 0; 
       foreach (var i in Items.FindAll(x => x.Category == item.Category)) 
       { 
        btnInfoLst.Add(new POSButtonInfo { content = i.Name, tag = i.SKU, gridCol = col, gridRow = row }); 


        if(row==9) 
        { 
         row = 0; 
         col += 1; 
        } 
        else 
         row+=1; 
       } 
       FUGU.Add(item.Category, btnInfoLst); 
      } 

     } 

내 버튼의 바인딩 내 사용자 지정 개체에서 있습니다

<TabControl Margin="10,10,10,26" Grid.Column="0" ItemsSource="{Binding FUGU}" Background="#FFE5E5E5"> 
     <TabControl.ItemTemplate> 
      <DataTemplate> 
       <TextBlock Text="{Binding Key}" /> 
      </DataTemplate> 
     </TabControl.ItemTemplate> 

     <TabControl.ContentTemplate> 
      <DataTemplate> 


       <ItemsControl ItemsSource="{Binding Value}" > 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 

          <Grid x:Name="grid"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="*" /> 
            <ColumnDefinition Width="*" /> 
           </Grid.ColumnDefinitions> 

           <Grid.RowDefinitions> 
            <RowDefinition /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
            <RowDefinition Height="0*" /> 
           </Grid.RowDefinitions> 
           <Button Content="{Binding content}" Tag="{Binding tag}" Grid.Row="{Binding gridRow}" Grid.Column="{Binding gridCol}" Margin="5" FontSize="31"/> 

          </Grid> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 


      </DataTemplate> 
     </TabControl.ContentTemplate> 
    </TabControl> 

C#보기 모델 : 여기 내 업데이트 된 코드입니다. 그러나 이러한 바인딩은 정상적으로 작동하지만 내보기에는 예기치 않은 동작이 발생합니다. 버튼은 그리드를 존중하지 않습니다. 이는 10 행 정의가 있고 내보기에 넣기 위해 12 개의 테스트 개체를 만들었다는 의미입니다. 코드에서 볼 수 있듯이 9가 눌 렸을 때 (10 번째 요소) 다음 열로 이동하여 다시 0으로 시작해야합니다. 대신 다음 열로 이동하지만 0 행을 다시 설정하지 않습니다. 또한 단추 개체가 전체 열을 차지하지 않고 디자인보기를 볼 때 전체 표 모양의 일반보기와 달리 표의 첫 번째 행만 나타납니다. 나는 데이터 템플릿에 익숙하지 않아서 내가 뭔가 잘못하고 있다고 확신한다. 모든 지침은 크게 감사하겠습니다.

Answer 1

다음과 같이하십시오. 내 mainviewmodel 내 난 다음 내가이 탭의 예에서 쇼를하고 싶어 viewmodels이 목록을 채울 것입니다 내 tabitemviewmodels

public List<ITabItemViewmodel> MyTabContent {get;private set} 

와 목록을 만들 것입니다.

MyTabContent.Add(new NameVm()); 
MyTabContent.Add(new AdressVm()); 
MyTabContent.Add(new OtherVm()); 

tabviewmodel이

public class NameVm : ITabItemViewmodel 
{ 
    public string HeaderText {get;set;} 

    public ICommand MyCommand {get;set;} 

    //other properties and stuff 
} 

처럼 보일 수 있고 나는 그런 좋은 tabitemviewmodel이있는 경우 단순히 내보기 자원 어디서나

<TabControl ItemsSource="{Binding MyTabContent}"> 
    <TabControl.ItemTemplate> 
     <!-- this is the header template--> 
     <DataTemplate> 
      <TextBlock Text="{Binding HeaderText}" /> 
     </DataTemplate> 
    </TabControl.ItemTemplate> 
    <TabControl.ContentTemplate> 
     <ContentPresenter Content="{Binding}"/> 
    </TabControl.ContentTemplate> 
</TabControl> 

을 WPF하게 렌더링 할 DataTemplates를 사용 할 수 있습니다 물론 "TabItemViews"에 대한 DataTemplates를 정의해야합니다.

<DateTemplate DataType="{x:Type NameVm}"> 
<view:MyViewForNameVm/> 
<DataTemplate> 

<UserControl x:class="view:MyViewForNameVm"> 
    <!-- here are all my Controls with bindings for my NameVm--> 
    <Button Command="{Binding MyCommand}"/> 
</UserControl>