From 0f73dbe2cd86f04c7365cb17b660391c60b8ac28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Kuklau?= <chucker23n+github@gmail.com>
Date: Fri, 14 Oct 2022 16:08:51 +0200
Subject: [PATCH] InfoBar: add basic support for wrapping lengthy `Message` 
 values

---
 .../Pages/StatusAndInfo/InfoBarPage.xaml      | 87 +++++++++++++++----
 src/Wpf.Ui/Styles/Controls/InfoBar.xaml       | 82 ++++++++---------
 2 files changed, 113 insertions(+), 56 deletions(-)

diff --git a/src/Wpf.Ui.Gallery/Views/Pages/StatusAndInfo/InfoBarPage.xaml b/src/Wpf.Ui.Gallery/Views/Pages/StatusAndInfo/InfoBarPage.xaml
index a49f19330..6ce5b4097 100644
--- a/src/Wpf.Ui.Gallery/Views/Pages/StatusAndInfo/InfoBarPage.xaml
+++ b/src/Wpf.Ui.Gallery/Views/Pages/StatusAndInfo/InfoBarPage.xaml
@@ -1,41 +1,61 @@
 <ui:UiPage x:Class="Wpf.Ui.Gallery.Views.Pages.StatusAndInfo.InfoBarPage"
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:Wpf.Ui.Gallery.Controls"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="clr-namespace:Wpf.Ui.Gallery.Views.Pages.StatusAndInfo"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:system="clr-namespace:System;assembly=System.Runtime"
-    xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml" Title="InfoBarPage" d:DataContext="{d:DesignInstance local:InfoBarPage, IsDesignTimeCreatable=False}" d:DesignHeight="450" d:DesignWidth="800" mc:Ignorable="d">
+           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+           xmlns:controls="clr-namespace:Wpf.Ui.Gallery.Controls"
+           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+           xmlns:local="clr-namespace:Wpf.Ui.Gallery.Views.Pages.StatusAndInfo"
+           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+           xmlns:system="clr-namespace:System;assembly=System.Runtime"
+           xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
+           Title="InfoBarPage"
+           d:DataContext="{d:DesignInstance local:InfoBarPage,
+                                            IsDesignTimeCreatable=False}"
+           d:DesignHeight="450"
+           d:DesignWidth="800"
+           mc:Ignorable="d">
     <ui:UiPage.Resources>
         <system:String x:Key="PageXamlUrl">https://github.com/lepoco/wpfui/blob/development/src/Wpf.Ui/Styles/Controls/InfoBar.xaml</system:String>
         <system:String x:Key="PageCsharpUrl">https://github.com/lepoco/wpfui/blob/development/src/Wpf.Ui/Controls/InfoBar.cs</system:String>
     </ui:UiPage.Resources>
 
     <Grid>
-        <ui:DynamicScrollViewer x:Name="PageScrollViewer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+        <ui:DynamicScrollViewer x:Name="PageScrollViewer"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch">
             <Grid>
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="280" />
                 </Grid.ColumnDefinitions>
 
-                <Grid Grid.Column="0" Margin="42">
-                    <controls:GalleryControlPresenter Grid.Row="0" Margin="0" CodeText="&lt;ui:InfoBar Title=&quot;Title&quot; Message=&quot;Essential message.&quot; /&gt;" HeaderText="A closable InfoBar.">
+                <StackPanel Grid.Column="0" Margin="42">
+                    <controls:GalleryControlPresenter Margin="0,0,0,42"
+                                                      CodeText="&lt;ui:InfoBar Title=&quot;Title&quot; Message=&quot;Essential message.&quot; /&gt;"
+                                                      HeaderText="A closable InfoBar.">
                         <controls:GalleryControlPresenter.Content>
                             <Grid>
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>
-                                <ui:InfoBar Title="Title" Grid.Column="0" IsOpen="{Binding ViewModel.IsInfoBarOpened, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=OneWay}" Message="Essential app message." Severity="{Binding ViewModel.InfoBarSeverity, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=OneWay}" />
+                                <ui:InfoBar Title="Title"
+                                            Grid.Column="0"
+                                            IsOpen="{Binding ViewModel.IsInfoBarOpened, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=OneWay}"
+                                            Message="Essential app message."
+                                            Severity="{Binding ViewModel.InfoBarSeverity, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=OneWay}" />
                                 <Grid Grid.Column="1" Margin="12,0,0,0">
                                     <Grid.RowDefinitions>
                                         <RowDefinition Height="Auto" />
                                         <RowDefinition Height="Auto" />
                                     </Grid.RowDefinitions>
-                                    <CheckBox Grid.Row="0" MinWidth="0" Content="Is open" IsChecked="{Binding ViewModel.IsInfoBarOpened, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=TwoWay}" />
-                                    <ComboBox Grid.Row="1" MinWidth="140" Margin="0,8,0,0" SelectedIndex="{Binding ViewModel.InfoBarSeverityComboBoxSelectedIndex, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=TwoWay}">
+                                    <CheckBox Grid.Row="0"
+                                              MinWidth="0"
+                                              Content="Is open"
+                                              IsChecked="{Binding ViewModel.IsInfoBarOpened, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=TwoWay}" />
+                                    <ComboBox Grid.Row="1"
+                                              MinWidth="140"
+                                              Margin="0,8,0,0"
+                                              SelectedIndex="{Binding ViewModel.InfoBarSeverityComboBoxSelectedIndex, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=TwoWay}">
                                         <ComboBoxItem Content="Informational" />
                                         <ComboBoxItem Content="Success" />
                                         <ComboBoxItem Content="Warning" />
@@ -45,7 +65,44 @@
                             </Grid>
                         </controls:GalleryControlPresenter.Content>
                     </controls:GalleryControlPresenter>
-                </Grid>
+
+                    <controls:GalleryControlPresenter Margin="0"
+                                                      CodeText="&lt;ui:InfoBar Title=&quot;Title&quot; Message=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&quot; /&gt;"
+                                                      HeaderText="A closable InfoBar with a long message.">
+                        <controls:GalleryControlPresenter.Content>
+                            <Grid>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="*" />
+                                    <ColumnDefinition Width="Auto" />
+                                </Grid.ColumnDefinitions>
+                                <ui:InfoBar Title="Title"
+                                            Grid.Column="0"
+                                            IsOpen="{Binding ViewModel.IsInfoBarOpened, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=OneWay}"
+                                            Message="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                                            Severity="{Binding ViewModel.InfoBarSeverity, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=OneWay}" />
+                                <Grid Grid.Column="1" Margin="12,0,0,0">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="Auto" />
+                                    </Grid.RowDefinitions>
+                                    <CheckBox Grid.Row="0"
+                                              MinWidth="0"
+                                              Content="Is open"
+                                              IsChecked="{Binding ViewModel.IsInfoBarOpened, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=TwoWay}" />
+                                    <ComboBox Grid.Row="1"
+                                              MinWidth="140"
+                                              Margin="0,8,0,0"
+                                              SelectedIndex="{Binding ViewModel.InfoBarSeverityComboBoxSelectedIndex, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=local:InfoBarPage}, Mode=TwoWay}">
+                                        <ComboBoxItem Content="Informational" />
+                                        <ComboBoxItem Content="Success" />
+                                        <ComboBoxItem Content="Warning" />
+                                        <ComboBoxItem Content="Error" />
+                                    </ComboBox>
+                                </Grid>
+                            </Grid>
+                        </controls:GalleryControlPresenter.Content>
+                    </controls:GalleryControlPresenter>
+                </StackPanel>
             </Grid>
         </ui:DynamicScrollViewer>
         <controls:ControlDocumentationSummary CsharpUrl="{StaticResource PageCsharpUrl}" XamlUrl="{StaticResource PageXamlUrl}" />
diff --git a/src/Wpf.Ui/Styles/Controls/InfoBar.xaml b/src/Wpf.Ui/Styles/Controls/InfoBar.xaml
index a401bb73c..13d0bbf8d 100644
--- a/src/Wpf.Ui/Styles/Controls/InfoBar.xaml
+++ b/src/Wpf.Ui/Styles/Controls/InfoBar.xaml
@@ -5,13 +5,13 @@
     All Rights Reserved.
 -->
 
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="clr-namespace:Wpf.Ui.Controls">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:Wpf.Ui.Controls">
 
     <Thickness x:Key="InfoBarPadding">14,16,14,16</Thickness>
     <Thickness x:Key="InfoBarBorderThemeThickness">1</Thickness>
+    <Thickness x:Key="InfoBarFirstRowMargin">0,7,0,0</Thickness>
 
     <Style TargetType="{x:Type controls:InfoBar}">
         <Setter Property="Background">
@@ -42,53 +42,53 @@
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type controls:InfoBar}">
                     <Grid x:Name="InfoBarRoot">
-                        <Border
-                            x:Name="ContentBorder"
-                            Padding="{TemplateBinding Padding}"
-                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                            Background="{TemplateBinding Background}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding Border.CornerRadius}">
+                        <Border x:Name="ContentBorder"
+                                Padding="{TemplateBinding Padding}"
+                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                                Background="{TemplateBinding Background}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                CornerRadius="{TemplateBinding Border.CornerRadius}">
                             <Grid>
                                 <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
                                     <ColumnDefinition Width="Auto" />
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>
 
-                                <controls:SymbolIcon
-                                    x:Name="SymbolIcon"
-                                    Grid.Column="0"
-                                    Margin="0,0,10,0"
-                                    Filled="True" />
+                                <Border Margin="0,0,10,0">
+                                    <controls:SymbolIcon x:Name="SymbolIcon"
+                                                         Grid.Column="0"
+                                                         Margin="{StaticResource InfoBarFirstRowMargin}"
+                                                         VerticalAlignment="Top"
+                                                         Filled="True" />
+                                </Border>
 
-                                <ContentPresenter
-                                    Grid.Column="1"
-                                    Margin="0,0,10,0"
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    Content="{TemplateBinding Title}"
-                                    ScrollViewer.CanContentScroll="False"
-                                    TextElement.FontSize="{TemplateBinding FontSize}"
-                                    TextElement.FontWeight="Bold" />
+                                <WrapPanel Grid.Column="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                                    <TextBlock Margin="0,0,10,0"
+                                               ScrollViewer.CanContentScroll="False"
+                                               Text="{TemplateBinding Title}"
+                                               TextElement.FontSize="{TemplateBinding FontSize}"
+                                               TextElement.FontWeight="Bold"
+                                               TextWrapping="Wrap" />
 
-                                <ContentPresenter
-                                    Grid.Column="2"
-                                    Margin="0"
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    Content="{TemplateBinding Message}"
-                                    ScrollViewer.CanContentScroll="False"
-                                    TextElement.FontSize="{TemplateBinding FontSize}" />
+                                    <TextBlock Margin="0"
+                                               ScrollViewer.CanContentScroll="False"
+                                               Text="{TemplateBinding Message}"
+                                               TextElement.FontSize="{TemplateBinding FontSize}"
+                                               TextWrapping="Wrap" />
+                                </WrapPanel>
 
-                                <controls:Button
-                                    x:Name="CloseButton"
-                                    Grid.Column="3"
-                                    Background="Transparent"
-                                    BorderThickness="0"
-                                    Command="{Binding Path=TemplateButtonCommand, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
-                                    Icon="Dismiss24" />
+                                <Border Grid.Column="2" Margin="10,0,0,0">
+                                    <controls:Button x:Name="CloseButton"
+                                                     Margin="{StaticResource InfoBarFirstRowMargin}"
+                                                     VerticalAlignment="Top"
+                                                     Background="Transparent"
+                                                     BorderThickness="0"
+                                                     Command="{Binding Path=TemplateButtonCommand, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                                     Icon="Dismiss24" />
+                                </Border>
                             </Grid>
                         </Border>
                     </Grid>