Skip to content

Commit

Permalink
TabControl Underlined TabPanel (#2902)
Browse files Browse the repository at this point in the history 
* Add new Underlined attached property
  New property to control the type of the underline which can be TabItem or TabPanel (with TabItem)
  Add Obsolete tag to IsUnderlined property.

* New Underline content control
  This control can be used for underline scenarios.

* Use new Underline control and Underlined property
  Use the new stuff at TabControl (TabControl) and MetroTabControl (MetroTabItem)

* Improve TabControl samples
  Add combobox to handle the new underlined stuff

* Additional Underline type
  New underline type to show only selected TabItems underlined

* Improve TabControl samples again

* New LineExtent property for Underline
  And make Underline more crystal

* Bring back the column stuff
  for TabItems, makes the Underline usage a little bit better (no jumpy lines gaps)

* Another UseLayoutRounding...

* Background stuff

* Add brush attached properties
  New brush attached properties for easy changing the underline brush colors

* update 1.5.0.md
  • Loading branch information
@punker76
punker76 authored Mar 22, 2017
1 parent d6e6d17 commit 63cf4eb
Show file tree
Hide file tree
Showing 12 changed files with 599 additions and 186 deletions.
24 changes: 23 additions & 1 deletion docs/release-notes/1.5.0.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,28 @@
- New `Badged` control. Thx to @ButchersBoy
![image](https://cloud.githubusercontent.com/assets/658431/23340345/d7dc4c86-fc34-11e6-838b-1ebee9381c7d.png)
- The `ControlsHelper.CornerRadius` can now used for `SplitButton` and `DropDownButton`.

- New underline types for `TabControl` and `MetroTabControl` [#2902](https://github.com/MahApps/MahApps.Metro/pull/2902)
+ Adds a new `Underlined` attached property to `TabControlHelper` which controls the type of the underline type. The old `IsUnderlined` property is now obsolete.
```
/// <summary>
/// Specifies the underline position of a TabControl.
/// </summary>
public enum UnderlinedType
{
None, // nothing
TabItems, // the old behavior with `IsUnderlined="True"`
SelectedTabItem, // selected TabItem underlined + underline hover effect for unselected items
TabPanel // underlined TabPanel and selected/hovered TabItem
}
```
+ Add also new `Brush` attached properties to enable easy changing the underline brushes.
```
TabControlHelper.UnderlineBrush
TabControlHelper.UnderlineSelectedBrush
TabControlHelper.UnderlineMouseOverBrush
TabControlHelper.UnderlineMouseOverSelectedBrush
```
![mahapps_newunderline4](https://cloud.githubusercontent.com/assets/658431/24204520/0e6f3cbc-0f19-11e7-8a2b-f40752918a96.gif)

## Closed Issues

Expand All @@ -33,3 +54,4 @@
- [#2792](https://github.com/MahApps/MahApps.Metro/issues/2792) Win32Exception on closing window
- [#2886](https://github.com/MahApps/MahApps.Metro/issues/2886) NumericUpDown: HasDecimals=False & using a bound StringFormat allows to enter a decimal point [@davericardo](https://github.com/davericardo)
- [#2885](https://github.com/MahApps/MahApps.Metro/issues/2885) [Bug] Badged Control Causes Window Loading to Hang
- [#2895](https://github.com/MahApps/MahApps.Metro/issues/2895) [RFC] [Enhancement] Proposed TabControlHelper.IsUnderlined Change
165 changes: 83 additions & 82 deletions ...Samples/MahApps.Metro.Demo/MahApps.Metro.Demo.Shared/ExampleViews/TabControlExamples.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,49 @@
d:DesignWidth="800"
d:DataContext="{d:DesignInstance MetroDemo:MainWindowViewModel}">

<UserControl.Resources>
<ObjectDataProvider x:Key="TabStripPlacementEnumValues"
MethodName="GetValues"
ObjectType="{x:Type Dock}">
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="Dock" />
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
<ObjectDataProvider x:Key="UnderlinedEnumValues"
MethodName="GetValues"
ObjectType="{x:Type Controls:UnderlinedType}">
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="Controls:UnderlinedType" />
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
</UserControl.Resources>

<ScrollViewer>
<StackPanel Margin="5, 10, 5, 0">
<Expander Margin="0" Header="_Default TabControl">
<Expander Margin="0" IsExpanded="True" Header="_Default TabControl">
<StackPanel Margin="15, 5, 15, 5">
<Label Content="Default TabControl normal style" Style="{DynamicResource DescriptionHeaderStyle}" />
<TabControl>
<Label Content="Default TabControl" Style="{DynamicResource DescriptionHeaderStyle}" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Underlined type" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="UnderlinedComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
Width="100"
ItemsSource="{Binding Source={StaticResource UnderlinedEnumValues}}"
SelectedIndex="0" />
<TextBlock Text="TabStripPlacement" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="TabStripPlacementComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
Width="100"
ItemsSource="{Binding Source={StaticResource TabStripPlacementEnumValues}}"
SelectedItem="{x:Static Dock.Top}" />
</StackPanel>
<TabControl Height="200"
Controls:TabControlHelper.Underlined="{Binding ElementName=UnderlinedComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TabStripPlacement="{Binding ElementName=TabStripPlacementComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _1">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
Expand All @@ -35,27 +72,7 @@
<TextBlock FontSize="30" Text="This is not content (it is)" />
</TabItem>
</TabControl>
<Label Content="Default _TabControl with underline" Style="{DynamicResource DescriptionHeaderStyle}" />
<TabControl Controls:TabControlHelper.IsUnderlined="True">
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 1">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 2">
<TextBlock FontSize="30" Text="More content" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 3">
<TextBlock FontSize="30" Text="More more content" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 4">
<TextBlock FontSize="30" Text="So much content!" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 5">
<TextBlock FontSize="30" Text="Content!" />
</TabItem>
<TabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item 6">
<TextBlock FontSize="30" Text="This is not content (it is)" />
</TabItem>
</TabControl>

<Label Margin="0, 5, 0, 0"
Content="Default TabControl with _AnimatedTabControl style"
Style="{DynamicResource DescriptionHeaderStyle}" />
Expand All @@ -75,6 +92,7 @@
</Controls:MetroTabItem>
</TabControl>
</Grid>

<Label Margin="0, 5, 0, 0"
Content="Default TabControl with Animated_SingleRowTabControl style"
Style="{DynamicResource DescriptionHeaderStyle}" />
Expand All @@ -97,50 +115,11 @@
</TabItem>
</TabControl>
</Grid>
<Label Margin="0, 5, 0, 0"
Content="Default TabControl _left style"
Style="{DynamicResource DescriptionHeaderStyle}" />
<Grid>
<Grid.Resources>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
</Grid.Resources>
<TabControl Height="200"
Margin="0, 10, 0, 0"
Controls:TabControlHelper.IsUnderlined="True"
TabStripPlacement="Left">
<TabItem Header="LeftItem 0">
<TextBlock FontSize="24" Text="This is left content 0" />
</TabItem>
<TabItem Header="LeftItem 1 Header">
<TextBlock FontSize="24" Text="This is left content 1" />
</TabItem>
<TabItem Header="LeftItem 2 Text">
<TextBlock FontSize="24" Text="This is left content 2" />
</TabItem>
<TabItem Header="LeftItem 3">
<TextBlock FontSize="24" Text="This is left content 3" />
</TabItem>
<TabItem Header="LeftItem 4">
<TextBlock FontSize="24" Text="This is left content 4" />
</TabItem>
</TabControl>
</Grid>
<!--
Right & Bottom are both work, no need to show them all
<TabControl TabStripPlacement="Right" Style="{DynamicResource MetroTabControl}">
<TabItem Header="RightItem0" Content="This is Right content 0" />
<TabItem Header="RightItem1" Content="This is Right content 1" />
<TabItem Header="RightItem2" Content="This is Right content 2" />
</TabControl>
<TabControl TabStripPlacement="Bottom" Style="{DynamicResource MetroTabControl}">
<TabItem Header="BottomItem0" Content="This is Bottom content 0" />
<TabItem Header="BottomItem1" Content="This is Bottom content 1" />
<TabItem Header="BottomItem2" Content="This is Bottom content 2" />
</TabControl>
-->

</StackPanel>
</Expander>
<Expander Margin="0, 10, 0, 0" Header="_Generic theme TabControls">

<Expander Margin="0, 10, 0, 0" IsExpanded="True" Header="_Generic theme TabControls">
<StackPanel Margin="15, 5, 15, 5">
<Label Content="MetroAnimatedTabControl" Style="{DynamicResource DescriptionHeaderStyle}" />
<Grid>
Expand Down Expand Up @@ -214,6 +193,7 @@
<TextBlock FontSize="30" Text="Animate everything!" />
</TabItem>
</Controls:MetroAnimatedTabControl>

<Label Margin="0, 5, 0, 0"
Content="MetroAnimatedSingleRowTabControl"
Style="{DynamicResource DescriptionHeaderStyle}" />
Expand All @@ -231,8 +211,9 @@
<TextBlock FontSize="30" Text="Content" />
</TabItem>
</Controls:MetroAnimatedSingleRowTabControl>

<Label Margin="0 5 0 0"
Content="TabControl w/ Closable Items"
Content="MetroTabControl w/ Closable Items"
Style="{DynamicResource DescriptionHeaderStyle}" />
<Controls:MetroTabControl TabItemClosingEvent="MetroTabControl_TabItemClosingEvent">
<Controls:MetroTabItem CloseButtonEnabled="True"
Expand Down Expand Up @@ -277,29 +258,49 @@
</Controls:MetroTabControl>

<Label Margin="0, 5, 0, 0"
Content="MetroTabControl _left style"
Content="MetroTabControl style"
Style="{DynamicResource DescriptionHeaderStyle}" />
<Controls:MetroTabControl Height="220"
Margin="0, 10, 0, 0"
Controls:TabControlHelper.IsUnderlined="True"
TabStripPlacement="Left">
<Controls:MetroTabItem Header="LeftItem 0">
<TextBlock FontSize="24" Text="This is left content 0" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Underlined type" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="MetroTabControlUnderlinedComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
ItemsSource="{Binding Source={StaticResource UnderlinedEnumValues}}"
SelectedIndex="0" />
<TextBlock Text="TabStripPlacement" Margin="5 5" VerticalAlignment="Center" />
<ComboBox x:Name="MetroTabStripPlacementComboBox"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="5 5"
Width="100"
ItemsSource="{Binding Source={StaticResource TabStripPlacementEnumValues}}"
SelectedItem="{x:Static Dock.Top}" />
</StackPanel>
<Controls:MetroTabControl Height="200"
Controls:TabControlHelper.Underlined="{Binding ElementName=MetroTabControlUnderlinedComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TabStripPlacement="{Binding ElementName=MetroTabStripPlacementComboBox, Path=SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _1">
<TextBlock FontSize="30" Text="Content" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _2 more">
<TextBlock FontSize="30" Text="More content" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 1 Header">
<TextBlock FontSize="24" Text="This is left content 1" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _3 header here">
<TextBlock FontSize="30" Text="More more content" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 2 Text">
<TextBlock FontSize="24" Text="This is left content 2" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _4 ">
<TextBlock FontSize="30" Text="So much content!" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 3" CloseButtonEnabled="True">
<TextBlock FontSize="24" Text="This is left content 3" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _5" CloseButtonEnabled="True">
<TextBlock FontSize="30" Text="Content!" />
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="LeftItem 4">
<TextBlock FontSize="24" Text="This is left content 4" />
<Controls:MetroTabItem Controls:ControlsHelper.HeaderFontSize="18" Header="item _6">
<TextBlock FontSize="30" Text="This is not content (it is)" />
</Controls:MetroTabItem>
</Controls:MetroTabControl>
</StackPanel>

</Expander>
</StackPanel>

Expand Down
Loading

0 comments on commit 63cf4eb

Please sign in to comment.