UserControl as a TabItem
-
Can someone please point me in the right direction? I'm already mostly bald, and I am pulling out what little hair that I have left! Originally I had some XAML that looked something like this in my main window (I've left parts out for brevity):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="TapeStream Management Console"
FontSize="20" TextAlignment="Center" VerticalAlignment="Center"/>
<TabControl Grid.Row="1">
<TabItem Header="Catalog">
views:CatalogTab
</TabItem>
<TabItem Header="Datasets">
... etc.
</TabItem>
... etc.
</Grid>Under each tab item I had a UserControl that displayed the actual information. The DataContext for each UserControl was set in the code behind. Things rendered pretty much the way I expected. (Yeah, I know this UI is not going to win any awards, but it is a start.) I had some issues with this implementation (trying to get a chance to prompt for the user to save changes when they switch to a different tab), and Collin Jasnoch[^] was kind enough to suggest an alternative approach. [^] I got it to somewhat work after what he was telling me finally penetrated my thick skull (with a little extra pounding from Pete O'Hanlon[^]). :) The problem that I have now is that it is rendering all screwy. The MainWindow XAML looks more like this now:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="TapeStream Management Console"
FontSize="20" Text -
Can someone please point me in the right direction? I'm already mostly bald, and I am pulling out what little hair that I have left! Originally I had some XAML that looked something like this in my main window (I've left parts out for brevity):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="TapeStream Management Console"
FontSize="20" TextAlignment="Center" VerticalAlignment="Center"/>
<TabControl Grid.Row="1">
<TabItem Header="Catalog">
views:CatalogTab
</TabItem>
<TabItem Header="Datasets">
... etc.
</TabItem>
... etc.
</Grid>Under each tab item I had a UserControl that displayed the actual information. The DataContext for each UserControl was set in the code behind. Things rendered pretty much the way I expected. (Yeah, I know this UI is not going to win any awards, but it is a start.) I had some issues with this implementation (trying to get a chance to prompt for the user to save changes when they switch to a different tab), and Collin Jasnoch[^] was kind enough to suggest an alternative approach. [^] I got it to somewhat work after what he was telling me finally penetrated my thick skull (with a little extra pounding from Pete O'Hanlon[^]). :) The problem that I have now is that it is rendering all screwy. The MainWindow XAML looks more like this now:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="TapeStream Management Console"
FontSize="20" TextTo get your headers and content to display the way you had them you will also need to style how your tabitems are rendered. This is because you placed the User Control directly as a TabItem so there was no header anymore (sorry I forgot about that detail) So when you define your TabControl you will do something like this:
*Note: you can also style how the actual TabControl looks And then elsewhere you customize how each TabItem is rendered (need to get the Header back as your UserControl Likely does not have one:))
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/> <Setter Property="IsEnabled" Value="{Binding Path=IsEnabled}"/> <Setter Property="Header" Value="{Binding Path=DisplayName}"/> <Setter Property="Content" Value="{Binding}" />The part to note is the Header and Content. By doing
Value="{Binding}"we are pushing the conent through. And then we are also setting the header to the desired property of 'DisplayName' in this case. The other stuff I have added to show you can put alot here. I have seen styling done to make the the area of the header look unique (like VS tabs or like other apps). You can also mess with the color of the selected tab or disabled tab etc. by using triggers.Computers have been intelligent for a long time now. It just so happens that the program writers are about as effective as a room full of monkeys trying to crank out a copy of Hamlet.
-
To get your headers and content to display the way you had them you will also need to style how your tabitems are rendered. This is because you placed the User Control directly as a TabItem so there was no header anymore (sorry I forgot about that detail) So when you define your TabControl you will do something like this:
*Note: you can also style how the actual TabControl looks And then elsewhere you customize how each TabItem is rendered (need to get the Header back as your UserControl Likely does not have one:))
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}"/> <Setter Property="IsEnabled" Value="{Binding Path=IsEnabled}"/> <Setter Property="Header" Value="{Binding Path=DisplayName}"/> <Setter Property="Content" Value="{Binding}" />The part to note is the Header and Content. By doing
Value="{Binding}"we are pushing the conent through. And then we are also setting the header to the desired property of 'DisplayName' in this case. The other stuff I have added to show you can put alot here. I have seen styling done to make the the area of the header look unique (like VS tabs or like other apps). You can also mess with the color of the selected tab or disabled tab etc. by using triggers.Computers have been intelligent for a long time now. It just so happens that the program writers are about as effective as a room full of monkeys trying to crank out a copy of Hamlet.
OMG! You are the man! :-D It works! Thank you, thank you, thank you! :thumbsup: If you only had an idea how much time I have spent Googling around trying to figure this out, going up all kinds of blind alleys and dead ends... :doh: If I could vote you a 10, I would. I am in your debt.
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.
-
OMG! You are the man! :-D It works! Thank you, thank you, thank you! :thumbsup: If you only had an idea how much time I have spent Googling around trying to figure this out, going up all kinds of blind alleys and dead ends... :doh: If I could vote you a 10, I would. I am in your debt.
WE ARE DYSLEXIC OF BORG. Refutance is systile. Your a$$ will be laminated. There are 10 kinds of people in the world: People who know binary and people who don't.