Hi i have a xaml code like this
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="test.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480">
<Grid x:Name="LayoutRoot">
<Button Content="Create a tab" HorizontalAlignment="Left" Margin="49,26,0,0" VerticalAlignment="Top" Width="75"/>
<TabControl Margin="0,63,0,0">
</TabControl>
</Grid>
</Window>
in TabControl no tabItem there.
please helpe me, how to program with c# :
if i click the button, it will add a tab item with grid and a textblock in that. the result i wish like this :
<Grid x:Name="LayoutRoot">
<Button Content="Create a tab" HorizontalAlignment="Left" Margin="49,26,0,0" VerticalAlignment="Top" Width="75"/>
<TabControl Margin="0,63,0,0">
<TabItem Header="tab1">
<Grid>
<TextBlock Text="hi there" />
</Grid>
</TabItem>
</TabControl>
</Grid>
and if i click more that button, will continue add tab like that.
please help me (worship)
Given that this is your xaml:
<Grid x:Name="LayoutRoot">
<Button Content="Create a tab" HorizontalAlignment="Left" Margin="49,26,0,0" VerticalAlignment="Top" Width="75"/>
<TabControl Margin="0,63,0,0" x:Name="MyTabControl">
<TabItem Header="tab1">
<Grid>
<TextBlock Text="hi there" />
</Grid>
</TabItem>
</TabControl>
</Grid>
you can add tabitem in codebehind like so:
TextBlock t = new TextBlock { Text= "hi" };
Grid g = new Grid;
g.Children.Add(t);
TabItem t = new TabItem();
t.Content = g;
MyTabControl.Children.Add(t);
Related
So I'm trying to get the same effect as a tab control where the button kinda merges into the frame seamlessly.
If we look at this one, we can see that there is nothing cutting off the "Red" button from the frame. It kinda just goes into the frame
To be more explicit, this is what I'm focusing on
And I wanted to accomplish the same effect with buttons and a frame but I'm not sure how to do it.
What's the proper way of accomplishing the same effect? Is there a style I should inherit from?
This is what I have
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button Height="50"/>
<Button Height="50"/>
<Button Height="50"/>
<Button Height="50"/>
</StackPanel>
<StackPanel Grid.Column="1">
<Frame/>
</StackPanel>
</Grid>
Sample for your screenshot
<Window x:Class="TabControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TabControl"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<DockPanel>
<TabControl TabStripPlacement="Left">
<TabItem Header="Header 1">
<Label Content="Text write here..." />
</TabItem>
<TabItem Header="Header 2" />
<TabItem Header="Header 3" />
<TabItem Header="Header 4" />
</TabControl>
</DockPanel>
</Grid>
</Window>
I have a MainWindow with a couple of radio buttons, a ContentControl and a button to change the content of ContentControl.
I also have a UserControl1 with a label on it. When I click the button on MainWindow to change the ContentControl.Content to UserControl1, it shows the label on top of the radio buttons I have from MainWindow. How can I change this so it acts like a page and does not stack each control on top of each other?
MainWindow.xaml:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="540" Margin="0,10,-6,-19" Width="968">
<StackPanel Height="74" Margin="731,446,0,0" VerticalAlignment="Top" Width="229" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" Margin="10,20,0,0"/>
<Button Content="Next" MinWidth="100" Margin="10,20,0,0" Click="NextBtnClick"/>
</StackPanel>
<RadioButton x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" Margin="312,130,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<RadioButton x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" Margin="312,232,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="1"/>
</Grid>
</Window>
MainWindow.xaml.cs:
private void NextBtnClick(object sender, RoutedEventArgs e)
{
if (RadioBtn2.IsChecked == true)
{
this.contentControl.Content = new UserControl1();
}
}
After clicking the next button, I get the controls from UserControl1 stacked on top of the radio buttons.
I'm quite new to WPF so any help would be greatly appreciated. Navigating through the docs is a nightmare because I'm not sure how to tackle this problem.
You can trying to use Grid panel without defining rows and column definitions. As per your code, you are trying define the panel layout by hardcoded Margin, Width and Height. That's why contorls are rendered on top of each other.
I've changed the Grid code to define the Row Definitions so that controls are stacked on row basis. So when you click on Button the ContentContrl is loaded to last Row so (which is defined as Height="*" via RowDefinition to take the remaining space)
You can read about WPF Panels and Grid layout at internet. This can be a good start.
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10 10 10 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions?
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" />
<Button Content="Next" MinWidth="100" Click="NextBtnClick"/>
</StackPanel>
<RadioButton Grid.Row="1" x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" VerticalAlignment="Top" FontWeight="Bold" GroupName="1"/>
<RadioButton Grid.Row="2" x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="3"/>
</Grid>
</Window>
I have a User Control with height Height="500" that Will have a TabControl with some items, I want to assign 320 to be the height of TabControl, However I am using others UserControls as Content for TabControl, those controls have height assigned as DesignHeight="320"
<UserControl x:Class="GUI.ProcessManager"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:GUI"
mc:Ignorable="d" Width="705" Height="500">
<Grid>
<TabControl Margin="0">
<TabItem Header="Tab 1">
<local:otherUserControl />
</TabItem>
<TabItem Header="Tab 2">
<local:otherUserControl2 />
</TabItem>
</TabControl>
<telerik:RadButton Content="Ok" Height="22" HorizontalAlignment="Left" Margin="25,450,0,0" Name="BtnOk" VerticalAlignment="Top" Width="135" Click="BtnOk_Click" />
<telerik:RadButton Content="Cancel" Height="22" HorizontalAlignment="Left" Margin="545,450,0,0" Name="BtnCancel" VerticalAlignment="Top" Width="90" Click="BtnCancel_Click"/>
</Grid >
</UserControl>
I want to give the TabControl a size of 320 and after that I want to put Ok and Cancel buttons, so they wont change position when user selects tabs
To do so I added a grid row definition
<Grid.RowDefinitions>
<RowDefinition Height="320"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
And assigned row 0 to TabControl:
<TabControl Grid.Row="0" Margin="0">
...
</TabControl>
Then assigned row 1 to Buttons:
<telerik:RadButton Grid.Row="1" Content="Ok" Height="22" HorizontalAlignment="Left" Margin="25,450,0,0" Name="BtnOk" VerticalAlignment="Top" Width="135" Click="BtnOk_Click" />
But I am only getting the window with The tab and then a blank space but without buttons are dissappering, Why is this happening or what am I missing
How to fix the size of TabControl so I can put buttons after that fixed size?
Use a DockPanel:
<DockPanel>
<TabControl DockPanel.Dock="Top" Margin="0" Height="320">
<TabItem Header="Tab 1">
<local:otherUserControl />
</TabItem>
<TabItem Header="Tab 2">
<local:otherUserControl2 />
</TabItem>
</TabControl>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" Margin="2,5">
<telerik:RadButton Content="Ok" Name="BtnOk" Click="BtnOk_Click" />
<telerik:RadButton Content="Cancel" Name="BtnCancel" Click="BtnCancel_Click"/>
</StackPanel>
</DockPanel>
The whole example would also be possible with using a Grid but it is necessary to remove the Margin from the Buttons.
I have a XAML code like this:
<Grid x:Name="LayoutRoot">
<TabControl Margin="0,53,0,0">
<TabItem Header="First">
<Grid Background="#FFE5E5E5">
<TextBlock />
</Grid>
</TabItem>
<TabItem Header="Second" >
<Grid Background="#FFE5E5E5">
<TextBlock />
</Grid>
</TabItem>
<TabItem Header="Third">
<Grid Background="#FFE5E5E5">
<TextBlock />
</Grid>
</TabItem>
</TabControl>
<Button Content="Button" HorizontalAlignment="Right" Margin="0,8,174,0" VerticalAlignment="Top" Width="75"/>
<TextBox Height="20.96" Margin="30,9,267,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
</Grid>
Using C# in every tabitem there is one textblock
if I type something in textbox, and after that I click the button, and now selected TabItem is "third"
Please help me how to change the textblock in that Selected TabItem now?
yeah the textbox and button outside from tab.
Here it is:
<Grid x:Name="LayoutRoot">
<TabControl Margin="0,53,0,0" Name="tabControl">
<TabItem Header="First">
<Grid Background="#FFE5E5E5">
<TextBlock />
</Grid>
</TabItem>
<TabItem Header="Second" >
<Grid Background="#FFE5E5E5">
<TextBlock />
</Grid>
</TabItem>
<TabItem Header="Third">
<Grid Background="#FFE5E5E5">
<TextBlock />
</Grid>
</TabItem>
</TabControl>
<Button Content="Button" HorizontalAlignment="Right" Margin="0,8,174,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBox Height="20.96" Margin="30,9,267,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Name="textBox"/>
</Grid>
Backing code:
private void Button_Click(object sender, RoutedEventArgs e)
{
var match = tabControl.Items.OfType<TabItem>().Where(tab => tab.Header.ToString() == textBox.Text).FirstOrDefault();
if (match != null) match.IsSelected = true;
}
Hope I get you right
Update
Looks like I didn't understand you from the first time. Here's right backing code for your case:
private void Button_Click(object sender, RoutedEventArgs e)
{
tabControl.Items.OfType<TabItem>().Where(tab => tab.IsSelected == true).First().Header = textBox.Text;
}
I know you can do this to get vertical text in a tab header:
<Window x:Class="Abodemploy.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>Homes</TextBlock>
</StackPanel>
</TabItem.Header>
<TabItem.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90" />
</TransformGroup>
</TabItem.LayoutTransform>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
However the text letters are sideways. What I'd like (if possible) is for the letter orientation to be correct (ie upwards), but the text flow downwards, is this possible, or am I just dreaming the impossible dream?
Thanks Psy
I think the following post answers your question:
vertical-text-in-wpf-textblock
and I was able to get the desired result as follows:
XAML
<Window x:Class="Test.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl Margin="0" Name="tabControl1" FlowDirection="LeftToRight" TabStripPlacement="Left">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock >
<ItemsControl x:Name="ic"></ItemsControl>
</TextBlock>
</StackPanel>
</TabItem.Header>
<Grid />
</TabItem>
</TabControl>
</Grid>
</Window>
And then set the ItemsSource of the ItemsControl to the string you want in the code behind.
Do you ask for this?
<TabItem.Header>
<StackPanel>
<TextBlock>H</TextBlock>
<TextBlock>o</TextBlock>
<TextBlock>m</TextBlock>
<TextBlock>e</TextBlock>
<TextBlock>s</TextBlock>
</StackPanel>
</TabItem.Header>