0
MVVM을 사용하여 viewModel에서 탭을 동적으로 작성합니다. 제 시도는 TabBox (사용자 정의 템플릿) &을 ModelView 객체로 표시 한 다음 TabItem보기 # 1 또는보기 # 2에서 modelview 표시를 기반으로하는 방법을 지정하는 "TabItem"컬렉션을 보유하는 것입니다.WPVM의 MVVM을 통해 서로 다른 모델 뷰와 뷰를 각 TabItem에 바인딩
내 MainWindow.xaml :
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModel="clr-namespace:MyApp.ViewModel" x:Class="MyApp.MainWindow"
xmlns:Views="clr-namespace:MyApp.View"
Height="700" Width="1000" Background="#FF1B0000" ResizeMode="NoResize">
<Window.DataContext>
<ViewModel:TabItemViewModel/>
</Window.DataContext>
<Grid>
<TabControl Background="Black" Margin="0,25,0,0" BorderThickness="0,0,0,0" ItemsSource="{Binding Tabs}" BorderBrush="Black" >
<TabControl.ItemTemplate>
<!-- this is the header template-->
<DataTemplate>
<Grid Margin="0">
<Border Margin="0,0,0,0"
Background="Black"
BorderBrush="Black"
BorderThickness="0,0,0,0" Padding="0,0,0,0">
<StackPanel Orientation="Horizontal"
Margin="0,0,0,0">
<Image Name ="tabImage" Source="{Binding TabImage_Disabled}" />
</StackPanel>
</Border>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True">
<Setter TargetName="tabImage" Property="Source" Value="{Binding TabImage_Enabled}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<!-- this is the body of the TabItem template-->
<DataTemplate>
<TextBlock Text="{Binding TabContents}" Foreground="white" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>
TabItem.cs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Media.Imaging;
using MyApp.ViewModel;
namespace MyApp.Model
{
public sealed class TabItem
{
public string TabName { get; set; }
public BitmapImage TabImage_Enabled { get; set; }
public BitmapImage TabImage_Disabled { get; set; }
public BitmapImage TabImage_Background { get; set; }
public ViewModelBase TabContents { get; set; }
}
}
ViewModelBase.cs :
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MyApp.ViewModel
{
public class ViewModelBase : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void RaisePropertyChanged(string propertyName)
{
var handler = this.PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
나의 현재 S/W 아키텍처입니다
TabItemViewModel .cs : 볼뿐만 아니라 (메신저 대신 TextBlock이의 사진을 보여주는 때문에, TabHeader에 대해) 나는 사용자 지정 서식을 지정 어떻게
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Windows.Media.Imaging;
using MyApp.Model;
namespace MyApp.ViewModel
{
public sealed class TabItemViewModel : ViewModelBase
{
const int NUMBER_OF_TABS = 2;
enum enum_Tabs
{
Research_Tab = 0,
Engineering_Tab = 1
}
Uri[] _aUrisEnabled = new Uri[NUMBER_OF_TABS];
Uri[] _aUrisDisabled = new Uri[NUMBER_OF_TABS];
Uri[] _aUrisBackgroundPics = new Uri[NUMBER_OF_TABS];
BitmapImage[] _aEnabledTabImages = new BitmapImage[NUMBER_OF_TABS];
BitmapImage[] _aDisabledTabImages = new BitmapImage[NUMBER_OF_TABS];
BitmapImage[] _aBackgroundTabImages = new BitmapImage[NUMBER_OF_TABS];
private ObservableCollection<TabItem> _tabs;
public ObservableCollection<TabItem> Tabs
{
get { return _tabs; }
set
{
_tabs = value;
RaisePropertyChanged("Tabs");
}
}
public TabItemViewModel()
{
Tabs = new ObservableCollection<TabItem>();
// URIs
// enabled pics
_aUrisEnabled[(int)enum_Tabs.Research_Tab] = new Uri("pack://application:,,,/Images/research_enabled.png");
_aUrisEnabled[(int)enum_Tabs.Engineering_Tab] = new Uri("pack://application:,,,/Images/engineering_enabled.png");
// disabled pics
_aUrisDisabled[(int)enum_Tabs.Research_Tab] = new Uri("pack://application:,,,/Images/research_disabled.png");
_aUrisDisabled[(int)enum_Tabs.Engineering_Tab] = new Uri("pack://application:,,,/Images/engineering_disabled.png");
// Tab backgrounds
_aUrisBackgroundPics[(int)enum_Tabs.Research_Tab] = new Uri("pack://application:,,,/Images/research_background.png");
_aUrisBackgroundPics[(int)enum_Tabs.Engineering_Tab] = new Uri("pack://application:,,,/Images/engineering_background.png");
// Load all images
for (int iImageIndex = 0; iImageIndex < NUMBER_OF_TABS; iImageIndex++)
{
_aEnabledTabImages[iImageIndex] = new BitmapImage(_aUrisEnabled[iImageIndex]);
_aDisabledTabImages[iImageIndex] = new BitmapImage(_aUrisDisabled[iImageIndex]);
_aBackgroundTabImages[iImageIndex] = new BitmapImage(_aUrisBackgroundPics[iImageIndex]);
}
Tabs.Add(new TabItem { TabName = "Research", TabImage_Enabled = _aEnabledTabImages[(int)enum_Tabs.Research_Tab], TabImage_Disabled = _aDisabledTabImages[(int)enum_Tabs.Research_Tab], TabImage_Background = _aBackgroundTabImages[(int)enum_Tabs.Research_Tab], TabContents = new TabResearchViewModel() });
Tabs.Add(new TabItem { TabName = "Engineering", TabImage_Enabled = _aEnabledTabImages[(int)enum_Tabs.Engineering_Tab], TabImage_Disabled = _aDisabledTabImages[(int)enum_Tabs.Engineering_Tab], TabImage_Background = _aBackgroundTabImages[(int)enum_Tabs.Engineering_Tab], TabContents = new TabEngineeringViewModel() });
}
}
}
내 문제의 ID입니다.
나는이 사이트에서 Google 검색을 시도했지만 &이지만 맞춤 템플릿을 사용하는 솔루션을 찾을 수 없습니다. 나는 TempleateSelector의 해결책을 찾았지만 어떻게 MVVM과 결합하는지 확신 할 수 없다.
는 또한 MainWIndow.xaml이 뭔가를 쓰기를 시도했습니다 : I 교체 할 <TabControl Background="Black" Margin="0,25,0,0" BorderThickness="0,0,0,0" ItemsSource="{Binding Tabs}" BorderBrush="Black" >
<TabControl.Resources>
<DataTemplate DataType="{x:Type ViewModel:TabResearchViewModel}">
<Views:TabResearchView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModel:TabEngineeringViewModel}">
<Views:TabEngineeringView />
</DataTemplate>
</TabControl.Resources>
... (removed for clarity)
을하여 바인딩하면서, "보기"(페이지)를 표시합니다 뭔가 <TextBlock Text="{Binding TabContents}" Foreground="white" /> </DataTemplate> 탭 컬렉션 ...
중요한 점이 있으면 도움을 주실 수 있습니다. 고급 기능 덕분에 ...