Skip to content

Commit b1a8a9b

Browse files
Nils-BerghsWhyDoUserNamesNeedToBeUniqueKeboo
authored
Fix for #2921 (#2938)
* Implementation for uniform with tabs * Implementation for #2921 * Adding back in demo app change Co-authored-by: Nils Berghs <[email protected]> Co-authored-by: Kevin Bost <[email protected]>
1 parent fa5fb99 commit b1a8a9b

File tree

3 files changed

+160
-133
lines changed

3 files changed

+160
-133
lines changed

‎MainDemo.Wpf/Domain/TabsViewModel.cs

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,27 @@ internal class TabsViewModel : ViewModelBase
2222
public TabsViewModel() =>
2323
CustomTabs = new()
2424
{
25-
new CustomTab { CustomHeader = "Custom tab 1", CustomContent = "Custom tab 1 content" },
26-
new CustomTab { CustomHeader = "Custom tab 2", CustomContent = "Custom tab 2 content" }
25+
new CustomTab {CustomHeader = "Custom tab 1"},
26+
new CustomTab {CustomHeader = "Custom tab 2"}
2727
};
2828
}
2929

30-
internal class CustomTab
30+
internal class CustomTab: ViewModelBase
3131
{
32+
public ICommand CloseCommand { get; }
33+
3234
public string? CustomHeader { get; set; }
3335

34-
public string? CustomContent { get; set; }
35-
}
36+
public string? CustomContent => CustomHeader + ", close clicked: " + CloseClickCount;
37+
38+
public int CloseClickCount { get; private set; }
39+
40+
internal CustomTab()
41+
{
42+
CloseCommand = new AnotherCommandImplementation(_ =>
43+
{
44+
CloseClickCount++;
45+
OnPropertyChanged(nameof(CustomContent));
46+
});
47+
}
48+
}

‎MainDemo.Wpf/Tabs.xaml

Lines changed: 138 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -446,132 +446,133 @@
446446
Text="Different sizes" />
447447

448448

449-
<StackPanel>
450-
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_19">
451-
<materialDesign:Card>
452-
<TabControl HorizontalContentAlignment="Left">
453-
<TabItem Header="TAB1">
454-
<TextBlock Margin="8" Text="Not filled, required width, tab 1" />
455-
</TabItem>
456-
<TabItem Header="TAB 2 Wide">
457-
<TextBlock Margin="8" Text="Not filled, required width, tab 2" />
458-
</TabItem>
459-
<TabItem Header="TAB 3 Extremely Wide">
460-
<TextBlock Margin="8" Text="Not filled, required width, tab 3" />
461-
</TabItem>
462-
<TabItem Header="TAB 4">
463-
<TextBlock Margin="8" Text="Not filled, required width, tab 4" />
464-
</TabItem>
465-
</TabControl>
466-
</materialDesign:Card>
467-
</smtx:XamlDisplay>
468-
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_20">
469-
<materialDesign:Card>
470-
<TabControl HorizontalContentAlignment="Left" Style="{StaticResource MaterialDesignUniformTabControl}">
471-
<TabItem Header="TAB1">
472-
<TextBlock Margin="8" Text="Not filled, uniform width, tab 1" />
473-
</TabItem>
474-
<TabItem Header="TAB 2 Wide">
475-
<TextBlock Margin="8" Text="Not filled, uniform width, tab 2" />
476-
</TabItem>
477-
<TabItem Header="TAB 3 Extremely Wide">
478-
<TextBlock Margin="8" Text="Not filled, uniform width, tab 3" />
479-
</TabItem>
480-
<TabItem Header="TAB 4">
481-
<TextBlock Margin="8" Text="Not filled, uniform width, tab 4" />
482-
</TabItem>
483-
</TabControl>
484-
</materialDesign:Card>
485-
</smtx:XamlDisplay>
486-
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_21">
487-
<materialDesign:Card>
488-
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledTabControl}">
489-
<TabItem Header="TAB1">
490-
<TextBlock Margin="8" Text="Filled, centered, required width, tab 1" />
491-
</TabItem>
492-
<TabItem Header="TAB 2 Wide">
493-
<TextBlock Margin="8" Text="Filled, centered, required width, tab 2" />
494-
</TabItem>
495-
<TabItem Header="TAB 3 Extremely Wide">
496-
<TextBlock Margin="8" Text="Filled, centered, required width, tab 3" />
497-
</TabItem>
498-
<TabItem Header="TAB 4">
499-
<TextBlock Margin="8" Text="Filled, centered, required width, tab 4" />
500-
</TabItem>
501-
</TabControl>
502-
</materialDesign:Card>
503-
</smtx:XamlDisplay>
504-
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_22">
505-
<materialDesign:Card>
506-
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledUniformTabControl}">
507-
<TabItem Header="TAB1">
508-
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 1" />
509-
</TabItem>
510-
<TabItem Header="TAB 2 Wide">
511-
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 2" />
512-
</TabItem>
513-
<TabItem Header="TAB 3 Extremely Wide">
514-
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 3" />
515-
</TabItem>
516-
<TabItem Header="TAB 4">
517-
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 4" />
518-
</TabItem>
519-
</TabControl>
520-
</materialDesign:Card>
521-
</smtx:XamlDisplay>
522-
523-
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_23">
524-
<materialDesign:Card>
525-
<TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid">
526-
<TabItem Header="TAB1">
527-
<TextBlock Margin="8" Text="Not filled secondary example tab 1" />
528-
</TabItem>
529-
<TabItem Header="TAB 2">
530-
<TextBlock Margin="8" Text="Not filled secondary example tab 2" />
531-
</TabItem>
532-
<TabItem Header="TAB 3333">
533-
<TextBlock Margin="8" Text="Secondary example tab 3333" />
534-
</TabItem>
535-
<TabItem Header="TAB4 Wide">
536-
<TextBlock Margin="8" Text="Secondary example tab 4 wide" />
537-
</TabItem>
538-
<TabItem Header="TABbbbbbbbbbbxxxxx 5">
539-
<TextBlock Margin="8" Text="Secondary example tab 5" />
540-
</TabItem>
541-
<TabItem Header="TAB 6 Different Width">
542-
<TextBlock Margin="8" Text="Secondary example tab 6 different width" />
543-
</TabItem>
544-
<TabItem Header="TAB 7 Looooong">
545-
<TextBlock Margin="8" Text="Secondary example tab 7 looooong" />
546-
</TabItem>
547-
<TabItem Header="TAB 8 Width">
548-
<TextBlock Margin="8" Text="Secondary example tab 8 width" />
549-
</TabItem>
550-
<TabItem Header="TAAX999">
551-
<TextBlock Margin="8" Text="Secondary example tab 9" />
552-
</TabItem>
553-
<TabItem Header="Tab10">
554-
<TextBlock Margin="8" Text="Secondary example tab 10" />
555-
</TabItem>
556-
</TabControl>
557-
</materialDesign:Card>
558-
</smtx:XamlDisplay>
559-
560-
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_24">
561-
<materialDesign:Card>
562-
<TabControl HorizontalContentAlignment="Left"
563-
materialDesign:ColorZoneAssist.Mode="SecondaryMid"
564-
Style="{StaticResource MaterialDesignFilledTabControl}">
565-
<TabItem Header="TAB1">
566-
<TextBlock Margin="8" Text="Secondary filled example tab 1" />
567-
</TabItem>
568-
<TabItem Header="TAB 2">
569-
<TextBlock Margin="8" Text="Secondary filled example tab 2" />
570-
</TabItem>
571-
</TabControl>
572-
</materialDesign:Card>
573-
</smtx:XamlDisplay>
574-
</StackPanel>
449+
<StackPanel>
450+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_19">
451+
<materialDesign:Card>
452+
<TabControl HorizontalContentAlignment="Left">
453+
<TabItem Header="TAB1">
454+
<TextBlock Margin="8" Text="Not filled, required width, tab 1" />
455+
</TabItem>
456+
<TabItem Header="TAB 2 Wide">
457+
<TextBlock Margin="8" Text="Not filled, required width, tab 2" />
458+
</TabItem>
459+
<TabItem Header="TAB 3 Extremely Wide">
460+
<TextBlock Margin="8" Text="Not filled, required width, tab 3" />
461+
</TabItem>
462+
<TabItem Header="TAB 4">
463+
<TextBlock Margin="8" Text="Not filled, required width, tab 4" />
464+
</TabItem>
465+
</TabControl>
466+
</materialDesign:Card>
467+
</smtx:XamlDisplay>
468+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_20">
469+
<materialDesign:Card>
470+
<TabControl HorizontalContentAlignment="Left" Style="{StaticResource MaterialDesignUniformTabControl}">
471+
<TabItem Header="TAB1">
472+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 1" />
473+
</TabItem>
474+
<TabItem Header="TAB 2 Wide">
475+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 2" />
476+
</TabItem>
477+
<TabItem Header="TAB 3 Extremely Wide">
478+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 3" />
479+
</TabItem>
480+
<TabItem Header="TAB 4">
481+
<TextBlock Margin="8" Text="Not filled, uniform width, tab 4" />
482+
</TabItem>
483+
</TabControl>
484+
</materialDesign:Card>
485+
</smtx:XamlDisplay>
486+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_21">
487+
<materialDesign:Card>
488+
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledTabControl}">
489+
<TabItem Header="TAB1">
490+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 1" />
491+
</TabItem>
492+
<TabItem Header="TAB 2 Wide">
493+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 2" />
494+
</TabItem>
495+
<TabItem Header="TAB 3 Extremely Wide">
496+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 3" />
497+
</TabItem>
498+
<TabItem Header="TAB 4">
499+
<TextBlock Margin="8" Text="Filled, centered, required width, tab 4" />
500+
</TabItem>
501+
</TabControl>
502+
</materialDesign:Card>
503+
</smtx:XamlDisplay>
504+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_22">
505+
<materialDesign:Card>
506+
<TabControl HorizontalContentAlignment="Center" Style="{StaticResource MaterialDesignFilledUniformTabControl}">
507+
<TabItem Header="TAB1">
508+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 1" />
509+
</TabItem>
510+
<TabItem Header="TAB 2 Wide">
511+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 2" />
512+
</TabItem>
513+
<TabItem Header="TAB 3 Extremely Wide">
514+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 3" />
515+
</TabItem>
516+
<TabItem Header="TAB 4">
517+
<TextBlock Margin="8" Text="Filled, centered, uniform width, tab 4" />
518+
</TabItem>
519+
</TabControl>
520+
</materialDesign:Card>
521+
</smtx:XamlDisplay>
522+
523+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_23">
524+
<materialDesign:Card>
525+
<TabControl HorizontalContentAlignment="Left" materialDesign:ColorZoneAssist.Mode="SecondaryMid">
526+
<TabItem Header="TAB1">
527+
<TextBlock Margin="8" Text="Not filled secondary example tab 1" />
528+
</TabItem>
529+
<TabItem Header="TAB 2">
530+
<TextBlock Margin="8" Text="Not filled secondary example tab 2" />
531+
</TabItem>
532+
<TabItem Header="TAB 3333">
533+
<TextBlock Margin="8" Text="Secondary example tab 3333" />
534+
</TabItem>
535+
<TabItem Header="TAB4 Wide">
536+
<TextBlock Margin="8" Text="Secondary example tab 4 wide" />
537+
</TabItem>
538+
<TabItem Header="TABbbbbbbbbbbxxxxx 5">
539+
<TextBlock Margin="8" Text="Secondary example tab 5" />
540+
</TabItem>
541+
<TabItem Header="TAB 6 Different Width">
542+
<TextBlock Margin="8" Text="Secondary example tab 6 different width" />
543+
</TabItem>
544+
<TabItem Header="TAB 7 Looooong">
545+
<TextBlock Margin="8" Text="Secondary example tab 7 looooong" />
546+
</TabItem>
547+
<TabItem Header="TAB 8 Width">
548+
<TextBlock Margin="8" Text="Secondary example tab 8 width" />
549+
</TabItem>
550+
<TabItem Header="TAAX999">
551+
<TextBlock Margin="8" Text="Secondary example tab 9" />
552+
</TabItem>
553+
<TabItem Header="Tab10">
554+
<TextBlock Margin="8" Text="Secondary example tab 10" />
555+
</TabItem>
556+
</TabControl>
557+
</materialDesign:Card>
558+
</smtx:XamlDisplay>
559+
560+
<smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="tabs_24">
561+
<materialDesign:Card>
562+
<TabControl
563+
HorizontalContentAlignment="Left"
564+
materialDesign:ColorZoneAssist.Mode="SecondaryMid"
565+
Style="{StaticResource MaterialDesignFilledTabControl}">
566+
<TabItem Header="TAB1">
567+
<TextBlock Margin="8" Text="Secondary filled example tab 1" />
568+
</TabItem>
569+
<TabItem Header="TAB 2">
570+
<TextBlock Margin="8" Text="Secondary filled example tab 2" />
571+
</TabItem>
572+
</TabControl>
573+
</materialDesign:Card>
574+
</smtx:XamlDisplay>
575+
</StackPanel>
575576

576577
<TextBlock Margin="0,15,0,20"
577578
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
@@ -587,8 +588,17 @@
587588
See: https://blog.jetbrains.com/dotnet/2014/09/04/fighting-common-wpf-memory-leaks-with-dotmemory/
588589
-->
589590
<TabControl.ItemTemplate>
590-
<DataTemplate DataType="domain:CustomTab">
591-
<TextBlock Text="{Binding CustomHeader, Mode=OneTime}" />
591+
<DataTemplate>
592+
<StackPanel Orientation="Horizontal">
593+
<TextBlock Text="{Binding CustomHeader}"/>
594+
<Button Command="{Binding CloseCommand}">
595+
<Button.Template>
596+
<ControlTemplate>
597+
<materialDesign:PackIcon Kind="Close" Foreground="Red" Background="Transparent"/>
598+
</ControlTemplate>
599+
</Button.Template>
600+
</Button>
601+
</StackPanel>
592602
</DataTemplate>
593603
</TabControl.ItemTemplate>
594604
<TabControl.ContentTemplate>

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.TabControl.xaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -332,6 +332,7 @@
332332
<ScaleTransform x:Name="ScaleTransform" ScaleX="0" ScaleY="0" />
333333
</Border.RenderTransform>
334334
<Rectangle x:Name="PART_BackgroundSelection"
335+
IsHitTestVisible="False"
335336
Fill="{TemplateBinding Background}"
336337
Opacity="0.0" />
337338
</Border>
@@ -343,6 +344,7 @@
343344
<Trigger Property="IsSelected" Value="True">
344345
<Setter TargetName="SelectionHighlightBorder" Property="Visibility" Value="Visible" />
345346
<Setter TargetName="contentPresenter" Property="Opacity" Value="1" />
347+
<Setter TargetName="contentPresenter" Property="wpf:RippleAssist.IsDisabled" Value="True"/>
346348
</Trigger>
347349
<DataTrigger Binding="{Binding TabStripPlacement, RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}" Value="Bottom">
348350
<Setter TargetName="SelectionHighlightBorder" Property="BorderThickness" Value="0,2,0,0" />
@@ -530,6 +532,7 @@
530532
</Grid>
531533
<Border x:Name="SelectionHighlightBorder" Visibility="Hidden">
532534
<Border x:Name="PART_BackgroundSelection"
535+
IsHitTestVisible="False"
533536
Background="{TemplateBinding Background}"
534537
CornerRadius="{Binding Path=(wpf:NavigationRailAssist.SelectionCornerRadius), RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}"
535538
Opacity="0.12" />
@@ -544,6 +547,7 @@
544547
</Trigger>
545548
<Trigger Property="IsSelected" Value="True">
546549
<Setter TargetName="contentPresenter" Property="Opacity" Value="1" />
550+
<Setter TargetName="contentPresenter" Property="wpf:RippleAssist.IsDisabled" Value="True"/>
547551
</Trigger>
548552

549553
<MultiTrigger>

0 commit comments

Comments
 (0)