InfoBarMessageControl Custom Style

Topics: Questions
Jan 17, 2013 at 3:29 PM
Edited Jan 17, 2013 at 3:29 PM

How can i change the default style of InfoBarMessageControl? I see InfobarMessageControl.generic.xaml but how can i use the converter that used (CountCollapsedConverter)?

Is there any sample that show how to change this style?

Coordinator
Jan 17, 2013 at 5:22 PM

See this article for example. You can simply copy the style, customize it and register it with the control in your app.

Jan 18, 2013 at 5:28 AM

should i copy and customize the below style?

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Catel.Windows.Controls"
                    xmlns:localconverters="clr-namespace:Catel.Windows.Data.Converters">

    <!-- Converters -->
    <localconverters:CountCollapsedConverter x:Key="CountCollapsedConverter"/>

	<!-- Brushes -->
	<SolidColorBrush x:Key="InfoBarMessageBackgroundBrush" Color="LightYellow" />
	<SolidColorBrush x:Key="InfoBarMessageSeparatorBrush" Color="Black" />
	<SolidColorBrush x:Key="InfoBarMessageErrorTextBackgroundBrush" Color="LightYellow" />
	<SolidColorBrush x:Key="InfoBarMessageErrorTextColorBrush" Color="Red" />
	<SolidColorBrush x:Key="InfoBarMessageWarningTextColorBrush" Color="Orange" />

	<!-- Style -->
    <Style x:Key="{x:Type local:InfoBarMessageControl}" TargetType="local:InfoBarMessageControl">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type local:InfoBarMessageControl}">
					<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
						
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>

                                <!-- Actual content -->
                                <ContentPresenter Grid.Row="1" x:Name="actualContent" />

                                <!-- Message bar, by default in-line (Grid.Row = 0) -->
                                <StackPanel Grid.Row="0" x:Name="PART_MessageBar"
                                            Visibility="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:InfoBarMessageControl}}, Path=MessageCount, Converter={StaticResource CountCollapsedConverter}}"
                                            Width="{Binding ElementName=actualContent, Path=ActualWidth}">

                                    <!-- Internal StackPanel, otherwise the whole control will have the background brush -->
                                    <StackPanel Background="{StaticResource InfoBarMessageBackgroundBrush}">
                                        <!-- Actual text -->
                                        <TextBlock Padding="4,2,4,2" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:InfoBarMessageControl}}, Path=InfoMessage}" />

                                        <!-- Line -->
                                        <Line Name="infoBarSeparator" Margin="0" Stroke="{StaticResource InfoBarMessageSeparatorBrush}" 
                                              X1="0" X2="1" Stretch="UniformToFill" />
                                    </StackPanel>

                                </StackPanel>
                            </Grid>

						<!-- Popup -->
                        <Popup IsOpen="{Binding ElementName=PART_MessageBar, Path=IsMouseOver, Mode=OneWay}" 
                               PlacementTarget="{Binding ElementName=infoBarSeparator}"
                               Placement="Bottom" 
							   Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ActualWidth}"
                               AllowsTransparency="True" PopupAnimation="Fade">
							<Grid Background="{StaticResource InfoBarMessageErrorTextBackgroundBrush}"
								  DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:InfoBarMessageControl}}}">
								
								<!-- Column definitions -->
								<Grid.ColumnDefinitions>
									<ColumnDefinition Width="*" />
								</Grid.ColumnDefinitions>
								
								<!-- Row definitions -->
								<Grid.RowDefinitions>
									<RowDefinition Height="Auto" />
									<RowDefinition Height="Auto" />
									<RowDefinition Height="Auto" />
								</Grid.RowDefinitions>

								<!-- List of errors -->
								<ItemsControl Grid.Row="0" ItemsSource="{Binding ErrorMessageCollection}" Height="Auto" VerticalAlignment="Top"
											  Visibility="{Binding ErrorMessageCollection.Count, Converter={StaticResource CountCollapsedConverter}}">
									<ItemsControl.ItemTemplate>
										<DataTemplate>
											<Grid>
												<!-- Column definitions -->
												<Grid.ColumnDefinitions>
													<ColumnDefinition Width="Auto" />
													<ColumnDefinition Width="*" />
												</Grid.ColumnDefinitions>
												
												<!-- Content -->
                                                <Image Grid.Column="0" Source="/Catel.MVVM;component/Resources/Images/Error.png" Margin="2,2,4,2" Width="16" Height="16"/>
                                                <TextBlock Grid.Column="1" Foreground="{StaticResource InfoBarMessageErrorTextColorBrush}" Text="{Binding}" TextWrapping="Wrap" />
											</Grid>
										</DataTemplate>
									</ItemsControl.ItemTemplate>
								</ItemsControl>

                                <!-- List of warnings -->
                                <ItemsControl Grid.Row="1" ItemsSource="{Binding WarningMessageCollection}" Height="Auto" VerticalAlignment="Top" 
											  Visibility="{Binding WarningMessageCollection.Count, Converter={StaticResource CountCollapsedConverter}}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <!-- Column definitions -->
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>

                                                <!-- Content -->
                                                <Image Grid.Column="0" Source="/Catel.MVVM;component/Resources/Images/Warning.png" Margin="2,2,4,2" Width="16" Height="16"/>
                                                <TextBlock Grid.Column="1" Foreground="{StaticResource InfoBarMessageWarningTextColorBrush}" Text="{Binding}" TextWrapping="Wrap" />
                                            </Grid>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>

                                <!-- Line -->
								<Line Grid.Row="2" Margin="0" Stroke="{StaticResource InfoBarMessageSeparatorBrush}" X1="0" X2="1" 
                                      Stretch="UniformToFill" />

							</Grid>
						</Popup>
						
					</Grid>
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</ResourceDictionary>

Coordinator
Jan 18, 2013 at 6:43 AM

Yep.

Jan 18, 2013 at 7:55 AM
Edited Jan 18, 2013 at 8:12 AM

Thanks!

another question: how to change the default text of InfoBarMessageControl? (the following warning and error were found. hower to view)

i want to show another message in it.

Coordinator
Jan 18, 2013 at 9:46 AM

See the Text property docs:

        /// <summary>
        /// Gets or sets the text to display when there are warnings and/or messages.
        /// </summary>
        /// <value>The text.</value>
        public string Text

Jan 18, 2013 at 10:14 AM

thanks for quick answers. I find this solution but is there a general way to change the Text property instead of doing this for all data entry views?

Coordinator
Jan 19, 2013 at 11:31 AM

No, there is no general way. I have implemented a DefaultTextPropertyValue (static) which you can set at application startup. It will be in the next release.

Jan 19, 2013 at 1:02 PM

Thank you very much.