Proposed Change to Layout

Apr 27, 2011 at 7:00 PM

I appreciate the work that you have done here.  I ran into a slight problem with the fixed size being very limiting.  I took the source code and made some tweaks to allow for a more flexible layout.  Just thought you might be interested in incorporating this into your project.

        Title="" BorderThickness="0" Background="White" 
    <Border x:Name="MessageBorder" BorderThickness="1" BorderBrush="#FF0B6CDE">
        <Grid x:Name="LayoutRoot" Margin="2">
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            <Border BorderBrush="{x:Null}" BorderThickness="1" Name="TextBlockBorder">
                <Grid x:Name="LayoutMessage">
                        <ColumnDefinition Width="75" />
                        <ColumnDefinition Width="Auto" MaxWidth="400" />
                        <RowDefinition Height="Auto" />

                    <Image Name="MessageIcon" Stretch="Uniform" VerticalAlignment="Center" HorizontalAlignment="Right" Source="/SilverlightMessageBoxes;component/icons/Information-128.png" Margin="0,20,8,20" Height="62" Width="56" />                
                    <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="10,20,10,20" >
                        <TextBlock TextWrapping="Wrap" Name="TextBlock" TextAlignment="Left" Text="Message" Padding="0,0,0,0" Grid.Column="2"/>
                        <TextBox Grid.Column="1" Height="21" HorizontalAlignment="Left" Margin="0,10,0,0" Name="InputTextBox" VerticalAlignment="Top" Width="300" Visibility="Collapsed" FontSize="10" Padding="0.5" KeyDown="keyDown" />
                        <ComboBox Grid.Column="1" Height="21" HorizontalAlignment="Left" Margin="0,10,0,0" Name="InputComboBox" VerticalAlignment="Top" Width="300" Visibility="Collapsed" FontSize="10" Padding="5,0,0,0" KeyDown="keyDown"/>
            <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Bottom" Grid.ColumnSpan="2" Height="28" Name="ButtonStack" HorizontalAlignment="Right" Margin="0, 0, 0, 5">
                <Button x:Name="OKButton" x:FieldModifier="public" Content="OK" Click="OKButton_Click" Width="75" Height="23" HorizontalAlignment="Center"  VerticalAlignment="Bottom" Margin="0,0,6,0" VerticalContentAlignment="Center" Padding="0" />
                <Button Content="No" Height="23" x:FieldModifier="public" x:Name="CancelButton" Width="75"  HorizontalAlignment="Center" VerticalAlignment="Bottom" Padding="3" Click="CancelButton_Click" Visibility="Collapsed" />            

Apr 27, 2011 at 7:18 PM

One slight change because it didn't work as expected when I started working with larger messages.  For some reason the MaxWidth defined on the column is not getting applied and can be removed.  To fix this....


<TextBlock TextWrapping="Wrap" Name="TextBlock" TextAlignment="Left" Text="Message" Padding="0,0,0,0" Grid.Column="2"/>

<TextBlock TextWrapping="Wrap" Name="TextBlock" TextAlignment="Left" Text="Message" Padding="0,0,0,0" MaxWidth="400"  />

Apr 27, 2011 at 7:49 PM

I think this is the last change.  I also ran into a problem with the images being loaded correctly for MessageType.Info, MessageType.TextInput, MessageType.ComboInput.  The solution was to add the setMessageIcon function to the switch

            switch (type)

                case MessageType.Info:
                    //The message is already set up as an info message box.
                    //No need for change.

                case MessageType.TextInput:

                case MessageType.ComboInput:

                    //Put the text part of the message on the top so it won't 
                    //interfere with the input box.
                    this.TextBlock.VerticalAlignment = VerticalAlignment.Top;

                    //Modify the margin around the textblock to make it more suitable.
                    Thickness newBorderMargin = this.TextBlockBorder.Margin;
                    newBorderMargin.Top += 5;
                    this.TextBlockBorder.Margin = newBorderMargin;

                    //Depending on the type of input, make either the textbox or
                    //the combobox visible. 
                    if (type == MessageType.ComboInput)
                        this.InputComboBox.ItemsSource = inputOptions;

                        //This is optional; Selects the first item in the combo box,
                        //if the combo options are not empty.
                        if (inputOptions != null && inputOptions.Length != 0)
                            this.InputComboBox.SelectedIndex = 0;

                        this.InputComboBox.Visibility = Visibility.Visible;
                    else //TextBox input.
                        this.InputTextBox.Visibility = Visibility.Visible;

                case MessageType.Error:
                    this.MessageBorder.BorderBrush = new SolidColorBrush(Colors.Red);
                case MessageType.Confirm:
                    this.MessageBorder.BorderBrush = new SolidColorBrush(Colors.Orange);
                    this.OKButton.Content = "Yes";
                    this.CancelButton.Content = "No";
                    this.CancelButton.Visibility = Visibility.Visible;


            //Set the message.
            this.TextBlock.Text = message;

Apr 27, 2011 at 10:10 PM

Hi kmcbrearty, 

I appreciate your work and effort.  I will try to incorporate your suggestions with the next release.


Thank you.

Apr 28, 2011 at 2:44 PM

Thank you,

I made another slight change this morning to allow it to handle large amounts of text even better.  My particular test case here was wanting to be able to display a stack trace with an error message. 
I added a scroll viewer around the textblock to prevent the message box window from getting to large.


<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" BorderThickness="0" MaxHeight="500">
    <TextBlock TextWrapping="Wrap" Name="TextBlock" TextAlignment="Left" Text="Message" Padding="0,0,0,0" MaxWidth="700" />



Apr 28, 2011 at 4:22 PM

Would you mind sending in your code via email? I would like to take a look at the final source code that you produced. Since it seems you have done a lot of work, I don't mind giving you credit with the new release. My email is Thanks!

Apr 28, 2011 at 4:31 PM

The source code has been sent.  Please let me know if you don't receive it.

May 1, 2011 at 4:08 AM

Thanks for sending in the source code. I haven't gotten the chance to look at it but I will let you know as soon as I can. 

Nov 29, 2011 at 5:29 PM

OUCH the fixed size is EXTREMELY limiting. I'm having to make this change as well.