CODEWITHSUNDEEP
windows-phone-7
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70416

User interface for messaging app for WP7

I have a Message.xaml file that should display a recipient field and a message field like this:

enter image description here

The user can add multiple recipients, so the TextBox should be flexible in height. I managed this with following code:

<TextBox FontSize="24" Margin="0,0,80,532" Name="absenderField" 
          AcceptsReturn="True" TextWrapping="Wrap" Height="auto"
          MinHeight="30" MaxWidth="375">
</TextBox>

Now the recipient field is growing in height when text is added that does not fit into it. The other TextBox is for the message. The markup is the same as for the recipient field, just the height is different.

The first problem is, that when the recipient field growes it goes over the message field but the message field should be aligned at the bottom of the recipient field and move down. how can I achieve that?

Now the other problem. When I enter a lot of text to make the message field grow, the recipient field will grow too. This is very strange. Why does this happen?

Is it possible to make the text scroll inside the text box?

Whole xaml: http://pastebin.com/xPg7rV9e

Upvotes: 0

Views: 221

Answers (1)

MarcinJuraszek
MarcinJuraszek

Reputation: 125630

I think you should rearrange your content and try something like that:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="80" />
    </Grid.ColumnDefinitions>

    <ScrollViewer>
        <StackPanel>
            <TextBox FontSize="24" Name="absenderField" AcceptsReturn="True" TextWrapping="Wrap" Height="auto" MinHeight="30" MaxWidth="375">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName  NameValue="Text" />
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>

            <TextBox FontSize="24" Name="messageField" AcceptsReturn="True" TextWrapping="Wrap">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName  NameValue="Chat" />
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
        </StackPanel>
    </ScrollViewer>

    <Button Grid.Column="1" Height="70" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Top" Width="76">
        <Button.Background>
            <ImageBrush ImageSource="/Smsflatrate;component/Images/appbar.add.rest2.png" />
        </Button.Background>
    </Button>
</Grid>

Upvotes: 1

Related Questions