I have been looking for a way to implement a child tab control inside a tab control(sort of like multi level tab controls).
but haven't found any materials for that, i can implement dynamically that at run time in Xaml.cs though, but i want to define it into Window.Xaml only, so that i can embed my controls into it.
Figure Below is an sample of the ui.
Kindly Suggest me the way to do it.
This will work for you.
<TabControl>
<TabItem Header="Tab1">
<TabControl Margin="10">
<TabItem Header="Tab1">
<TabControl Margin="20">
<TabItem Header="Tab1">
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<DockPanel >
<TextBlock Text="Name:" VerticalAlignment="Center" DockPanel.Dock="Left"></TextBlock>
<TextBox Text="Nitesh" Margin="10,0,0,0" DockPanel.Dock="Right"></TextBox>
</DockPanel>
<StackPanel Orientation="Horizontal" Margin="10">
<Button Margin="5">OK</Button>
<Button Margin="5">Cancel</Button>
</StackPanel>
</StackPanel>
</TabItem>
<TabItem Header="Tab2"></TabItem>
</TabControl>
</TabItem>
<TabItem Header="Tab2"></TabItem>
</TabControl>
</TabItem>
<TabItem Header="Tab2"></TabItem>
</TabControl>
Related
i have a slight problem with the grid layout manager in WPF, using DotNetCore 3.1. I have the following code:
<TabControl Grid.Row="4" Grid.Column="0" Margin="0,0,5,0" HorizontalContentAlignment="Center" VerticalContentAlignment="Top">
<TabItem Header="APM ops">
<UniformGrid Rows="6" Columns="1" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top">
<GroupBox Name="CheckStatus" Header="Check status" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<UniformGrid Grid.Row="0" Rows="1" Columns="2" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button HorizontalAlignment="Left" VerticalAlignment="Center">HAC processes</Button>
<Button HorizontalAlignment="Right" VerticalAlignment="Center">Nanny processes</Button>
</UniformGrid>
</GroupBox>
<GroupBox Name="RestartProcesses" Header="Restart services" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<UniformGrid Rows="8" Columns="2" HorizontalAlignment="Center" VerticalAlignment="Top">
<CheckBox>hornetq</CheckBox>
<CheckBox>marble_supervisor</CheckBox>
<CheckBox>odb</CheckBox>
<CheckBox>offline_engine</CheckBox>
<CheckBox>mercuryAS</CheckBox>
<CheckBox>businessImpactService</CheckBox>
<CheckBox>pmanager</CheckBox>
<CheckBox>db_loader</CheckBox>
<CheckBox>marble_loader</CheckBox>
<CheckBox>schedulergw</CheckBox>
<CheckBox>marble_worker</CheckBox>
<CheckBox>wde</CheckBox>
<CheckBox>marble_matcher</CheckBox>
<RadioButton>(make a selection)</RadioButton>
<Button>Restart</Button>
<RadioButton>(make a selection)</RadioButton>
</UniformGrid>
</GroupBox>
</UniformGrid>
</TabItem>
<TabItem Header="Java VM ops"/>
<TabItem Header="Server cfg"/>
<TabItem Header="Credential cfg"/>
</TabControl>
what I get is this:
What I would like to get is something more like this, where the gap betwenn the two GroupBoxes is minimized and there is some sort of margin between the checkboxes of the second Groupbox:
However, I don't seem to be able to find the correct controls and/or properties. Thanks in advance!
I figured it out. I needed to use the Grid property, not the UniformGrid ("duh!")... I guess in retrospect, it was kind of obvious, but I apparently couldn't see the forest for the trees.
Look at the difference if I replace this code:
<TabControl TabStripPlacement="Left">
<TabItem Header="Example"/>
</TabControl>
with this one:
<TabControl TabStripPlacement="Left">
<TabItem Header="Example" Width="57" />
</TabControl>
In the second case, how can I avoid the drawing of the vertical line between Header and ContentPresenter of the TabControl.TabItem?
You could use the HeaderTemplate instead and put the fixed size within the DataTemplate.
<TabControl TabStripPlacement="Left">
<TabItem Header="Example">
<TabItem.HeaderTemplate>
<DataTemplate>
<TextBlock Text="Example" TextAlignment="Center" Width="57" />
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>
I have 4 buttons binding commands, I want to use tabcontrols accomplish these commands.
<Button Margin="5" Width="Auto" Height="26" Content="operating" Command="{Binding PCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Button Margin="5" Width="Auto" Height="26" Content="settings" Command="{Binding SettingCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Button Margin="5" Width="Auto" Height="26" Content="showing" Command="{Binding DiCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Button Margin="5" Width="Auto" Height="26" Content="controls" Command="{Binding DeviceCmd}" CommandParameter="{Binding ElementName=frame}"/>
<Frame x:Name="frame" Source="PPage.xaml" NavigationUIVisibility="Hidden" />
settings commmand like this:
SettingCmd = new RelayCommand<System.Windows.Controls.Frame>
(
(f) =>
{
f.Navigate(new Uri(#"View\SettingPage.xaml", UriKind.Relative));
}
);
now I make these changes, how to add commands to them to accomplish the commands in buttons, and there are 4 xaml pages according to 4 buttons
<controls:MetroAnimatedSingleRowTabControl Grid.Row="1" x:Name="MainTabControl">
<TabItem Header="operating"></TabItem>
<TabItem Header="settings"></TabItem>
<TabItem Header="showing"></TabItem>
<TabItem Header="controls"></TabItem>
</controls:MetroAnimatedSingleRowTabControl>
Since there are no need for the frame anymore, the best way is to bring the Xaml of each page and put it inside the corresponding TabItem, for example :
<TabItem Header="settings">
//bring the Xaml of SettingPage.Xaml to here
</TabItem>
In that case they will be no need for navigation and there for no need for commands, but if you insisted on keeping each tab content on a separated Xaml file you must first define a Frame in each TabItem, and set its source property to the coresponding Xaml page :
<controls:MetroAnimatedSingleRowTabControl Grid.Row="1" x:Name="MainTabControl">
<TabItem Header="operating">
<Frame Source="View/OperatingPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
<TabItem Header="settings">
<Frame Source="View/SettingPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
<TabItem Header="showing">
<Frame Source="View/ShowingPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
<TabItem Header="controls">
<Frame Source="View/ControlsPage.xaml" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" NavigationUIVisibility="Hidden"/>
</TabItem>
</controls:MetroAnimatedSingleRowTabControl>
in this case also there are no need for any command.
I'm (evidently) new to WPF and am struggling to figure out how to put a ListBox inside a TabItem. My current attempt below results in Property 'Content' set more than once, all the answers to which I can't seem to relate to mine.
<Window>
<Grid>
<TabItem>
<Grid Background="Red"></Grid>
<TabItem.Header>
<DockPanel Width="130" HorizontalAlignment="Center">
<TextBlock Text="Inventory" Foreground="Black" FontSize="30" TextAlignment="Center"/>
</DockPanel>
</TabItem.Header>
<ListBox>
<ListBoxItem>Test</ListBoxItem>
</ListBox>
</TabItem>
</Grid>
</Window>
If anyone could point me in the right direction that'd be appreciated.
Ok, Edited answer which actually works is below. Indeed, as others suggest, removing the "<Grid Background="Red"></Grid>" line solves the problem. So does removing the following lines:
<ListBox>
<ListBoxItem>Test</ListBoxItem>
</ListBox>
The Grid and ListBox views are both being set as the Content Property of the TabItem and this is the cause of the error.
If we truly wish to use both the ListBox to be the content of our TabItem, we need to place them both inside a stack panel, like below:
<Window>
<Grid>
<TabItem>
<TabItem.Header>
<DockPanel Width="130" HorizontalAlignment="Center">
<TextBlock Text="Inventory" Foreground="Black" FontSize="30" TextAlignment="Center"/>
</DockPanel>
</TabItem.Header>
<StackPanel Orientation="Horizontal">
<Grid Background="Red"></Grid>
<ListBox>
<ListBoxItem>Test</ListBoxItem>
</ListBox>
</StackPanel>
</TabItem>
</Grid>
</Window>
I have two tab controls stacked (using dockpanel) in a way that the empty space overlaps of their Tabstrips overlaps. I have to let users to resize these two tabcontrols height, especially the bottom one if they need.. Is there any way i can hold the emptyspace next to TabHeaders and drag it to resize?
<DockPanel>
<TabControl DockPanel.Dock="Bottom" Height="200" Margin="0,-20,0,0">
<TabItem Header="tab 1"></TabItem>
<TabItem Header="tab2"></TabItem>
</TabControl>
<TabControl TabStripPlacement="Bottom" FlowDirection="RightToLeft">
<TabItem Header="Tab 3" FlowDirection="LeftToRight"></TabItem>
<TabItem Header="Tab 4" FlowDirection="LeftToRight"></TabItem>
</TabControl>
</DockPanel>
Any pointers would be greatly appreciated.
Found the answer.
<osc:DockPanelSplitter DockPanel.Dock="Bottom" Margin="0,-20,0,0" Height="20" Panel.ZIndex="-1"/>
<TabControl TabStripPlacement="Bottom" FlowDirection="RightToLeft">
<TabItem Header="Tab 3" FlowDirection="LeftToRight"></TabItem>
<TabItem Header="Tab 4" FlowDirection="LeftToRight"></TabItem>
</TabControl>
</DockPanel>
Key is Panel.Zindex on DockPanelSplitter