Tabcontrol won't fill the window
-
I have a tab control with 4 TabItems . The width of the tab control is the combined width of the 4 TabItems headers, instead of filling the window. How can I set it to fill the screen? Here is the code: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="THEMIS" Height="630" Width="668" WindowState="Maximized">Desktop Messages Projects Administration Thanks for any help.
-
I have a tab control with 4 TabItems . The width of the tab control is the combined width of the 4 TabItems headers, instead of filling the window. How can I set it to fill the screen? Here is the code: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="THEMIS" Height="630" Width="668" WindowState="Maximized">Desktop Messages Projects Administration Thanks for any help.
One way would be to change the second StackPanel to a Grid. Mark p.s. If you're going to post XAML, please post valid XAML :)
Mark Salsbery Microsoft MVP - Visual C++ :java:
-
One way would be to change the second StackPanel to a Grid. Mark p.s. If you're going to post XAML, please post valid XAML :)
Mark Salsbery Microsoft MVP - Visual C++ :java:
I didn't notice until now that everything turned to lowercase :( I tried to do that and it worked, but then I applied a control template to the tabitems and it broke again. I hope the xaml is better this time:
-
I didn't notice until now that everything turned to lowercase :( I tried to do that and it worked, but then I applied a control template to the tabitems and it broke again. I hope the xaml is better this time:
XAML looks good thanks :) I'm not sure what you're trying to do here...your tab control still fills the entire window. What's broken? Mark
Mark Salsbery Microsoft MVP - Visual C++ :java:
-
XAML looks good thanks :) I'm not sure what you're trying to do here...your tab control still fills the entire window. What's broken? Mark
Mark Salsbery Microsoft MVP - Visual C++ :java:
This is what I am seeing: http://farm4.static.flickr.com/3204/3138578581_e665ec2790.jpg?v=0
-
This is what I am seeing: http://farm4.static.flickr.com/3204/3138578581_e665ec2790.jpg?v=0
I see that too - it's the way you templated it :) What do you want to see? Mark
Mark Salsbery Microsoft MVP - Visual C++ :java:
-
I see that too - it's the way you templated it :) What do you want to see? Mark
Mark Salsbery Microsoft MVP - Visual C++ :java:
It was supposed to be a menu, and beneath that a tab control with 4 tabitems. The headers of the tabitems (the section were you press to select the tab) are using a control template that replaces the normal look. It should look like this, but the now the tab won't stretch on the whole screen: http://farm4.static.flickr.com/3219/3139805444_91eedf8bdd.jpg?v=0 The code is in the next post (image link don't like 'ignore HTML tags)
-
I see that too - it's the way you templated it :) What do you want to see? Mark
Mark Salsbery Microsoft MVP - Visual C++ :java:
The code:
-
The code:
Your tab control still needs to be in an element that stretches its content, like a grid. When you wrap the TabControl in a grid, you'll see your TabItem template is messed up because of the "stack" of items in the header Grid. Maybe try nesting the TabItem header elements, something like this:
<Grid> <Grid.Resources> <ControlTemplate x:Key="TabItemTemplate" TargetType="{x:Type TabItem}"> <Grid> <Border x:Name="outerRec" Width="110" Height="30" CornerRadius="10" > <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="SteelBlue" Offset="0"/> <GradientStop Color="Red" Offset="1"/> </LinearGradientBrush> </Border.Background> <Border Width="105" Height="25" CornerRadius="10" > <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0"/> <GradientStop Color="Transparent" Offset="1"/> </LinearGradientBrush> </Border.Background> <Viewbox> <ContentControl Margin="4" Content="{TemplateBinding MenuItem.Header}"/> </Viewbox> </Border> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="MenuItem.IsMouseOver" Value="True"> <Setter TargetName="outerRec" Property="Background" Value="SteelBlue"/> </Trigger> <Trigger Property="MenuItem.IsPressed" Value="True"> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleX=".9" ScaleY=".9"/> </Setter.Value> </Setter> <Setter Property="RenderTransformOrigin" Value=".5,.5"/> -
Your tab control still needs to be in an element that stretches its content, like a grid. When you wrap the TabControl in a grid, you'll see your TabItem template is messed up because of the "stack" of items in the header Grid. Maybe try nesting the TabItem header elements, something like this:
<Grid> <Grid.Resources> <ControlTemplate x:Key="TabItemTemplate" TargetType="{x:Type TabItem}"> <Grid> <Border x:Name="outerRec" Width="110" Height="30" CornerRadius="10" > <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="SteelBlue" Offset="0"/> <GradientStop Color="Red" Offset="1"/> </LinearGradientBrush> </Border.Background> <Border Width="105" Height="25" CornerRadius="10" > <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="White" Offset="0"/> <GradientStop Color="Transparent" Offset="1"/> </LinearGradientBrush> </Border.Background> <Viewbox> <ContentControl Margin="4" Content="{TemplateBinding MenuItem.Header}"/> </Viewbox> </Border> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="MenuItem.IsMouseOver" Value="True"> <Setter TargetName="outerRec" Property="Background" Value="SteelBlue"/> </Trigger> <Trigger Property="MenuItem.IsPressed" Value="True"> <Setter Property="RenderTransform"> <Setter.Value> <ScaleTransform ScaleX=".9" ScaleY=".9"/> </Setter.Value> </Setter> <Setter Property="RenderTransformOrigin" Value=".5,.5"/>Thanks a lot. Its working great.
