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.

<controls:ChildWindow 
        x:Class="SilverlightMessageBoxes.CustomMessage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"                    
        Title="" BorderThickness="0" Background="White" 
        mc:Ignorable="d" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        d:DesignWidth="525"
        d:DesignHeight="200">
    <Border x:Name="MessageBorder" BorderThickness="1" BorderBrush="#FF0B6CDE">
        <Grid x:Name="LayoutRoot" Margin="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Border BorderBrush="{x:Null}" BorderThickness="1" Name="TextBlockBorder">
                <Grid x:Name="LayoutMessage">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75" />
                        <ColumnDefinition Width="Auto" MaxWidth="400" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <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>                
                </Grid>
            </Border>
            <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" />            
            </StackPanel>        
        </Grid>
    </Border>
</controls:ChildWindow>

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....

Change:

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

<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.
                    setMessageIcon("Information-128.png");
                    break;

                case MessageType.TextInput:
                    setMessageIcon("Information-128.png");

                    break;
                case MessageType.ComboInput:
                    setMessageIcon("Information-128.png");

                    //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;
                    }
                    break;

                case MessageType.Error:
                    setMessageIcon("button_cancel-256.png");
                    this.MessageBorder.BorderBrush = new SolidColorBrush(Colors.Red);
                    break;
                case MessageType.Confirm:
                    setMessageIcon("Bullet-question-256.png");
                    this.MessageBorder.BorderBrush = new SolidColorBrush(Colors.Orange);
                    this.OKButton.Content = "Yes";
                    this.CancelButton.Content = "No";
                    this.CancelButton.Visibility = Visibility.Visible;

                    break;
            }

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

Coordinator
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" />
</ScrollViewer>

 

 

Coordinator
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 khalzoro@yahoo.com. Thanks!

Apr 28, 2011 at 4:31 PM

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

Coordinator
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.