How to create Windows Phone 7 SMS textbox - windows-phone-7

I'm looking to create a control that is similar to the "bubble" textbox found in the default SMS app. I was able to come close, creating a "bubble" shaped path, with a textbox inside it, but am having issues with the textbox sizing. I have set "AcceptsReturn" on the textbox to True. What I've noticed is that when the number of lines in the textbox increases, the textbox disappears from the view (under the SIP). This is not the way the SMS textbox behaves - it always seems to scroll up to show the latest line (whereas my control becomes hidden). Would appreciate any pointers...
[Update]
Managed to create this by customizing TextBox template:
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="1" StrokeThickness="0" Fill="{TemplateBinding Background}"/>
<ContentControl Grid.Row="1" x:Name="ContentElement" HorizontalContentAlignment="Stretch" Margin="0" Padding="{StaticResource PhoneTouchTargetLargeOverhang}" VerticalContentAlignment="Stretch" FontSize="{StaticResource PhoneFontSizeNormal}" Background="Black" />
<Path Data="M161.25,90.75 L184.25,90.75 L184.25,100.75" HorizontalAlignment="Left" Grid.Row="0" Stretch="Fill" StrokeThickness="0" UseLayoutRounding="False" Width="23" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Background}" Margin="54.75,0,0,0">
<Path.RenderTransform>
<CompositeTransform Rotation="180"/>
</Path.RenderTransform>
</Path>
<Rectangle Grid.Row="2" Fill="{TemplateBinding Background}"/>
<TextBlock x:Name="txtTimeStamp" Grid.Row="2" TextWrapping="Wrap" Padding="{TemplateBinding Padding}" FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding Timestamp, Converter={StaticResource dateTimeConverter}, Mode=TwoWay}">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneTextBoxForegroundColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>

Related

AUTOCOMPLETE SUGGESTIONS APPEARS ON TOP OF TEXT BOX -WINDOWS PHONE

I am using auto complete textbox from windows phone toolkit.I need the list of suggestions below my textbox but it shows up above the text box .How do I make the suggestions appear below the text box..Here is my XAML.
<Grid Margin="0,336,0,189" x:Name="editrow" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220" ></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<toolkit:AutoCompleteBox x:Name="newname" FilterMode="StartsWith" IsTextCompletionEnabled="True" Foreground="White" Background="#53000000" BorderThickness="0" Grid.Column="0" Grid.Row="0" Margin="10,0,0,0" IsDropDownOpen="True" RenderTransformOrigin="0,0">
<toolkit:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<StackPanel Background="Gray" Orientation="Horizontal">
<TextBlock Text="{Binding }"/>
</StackPanel>
</DataTemplate>
</toolkit:AutoCompleteBox.ItemTemplate>
</toolkit:AutoCompleteBox>
<TextBox x:Name="rowquantity" Foreground="White" Background="#53000000" BorderThickness="0" Grid.Column="1" Grid.Row="0" InputScope="Number"></TextBox>
<toolkit:ListPicker Grid.Row="0" x:Name="units" Foreground="White" BorderThickness="0" Background="#53000000" Grid.Column="2" ExpansionMode="FullScreenOnly" Margin="12,5,0,14" >
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0 0 0 0">
<TextBlock Text="{Binding}"
FontSize="32" LineHeight="1"/>
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
<Button Content="Add" BorderBrush="#53000000" Foreground="#53000000" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Top" Height="74" Click="Button_Click" Margin="0,0,3,0" Width="158"/>
</Grid>
The location of the popup is determined based on the available size. If there's more space above the AutoCompleteTextBox, it will pop up. You can see this in the popuphelper.cs source file where the code arranges the popup.
There really isn't an option to override the behavior.

Windows Phone : Text in textblock not showing fully

Problem solved!
Anyway, I just figured out the problem. I did a .Trim() on the values and surprisingly they can be wrapped. Thanks and sorry for all the trouble. =)
I am doing some data binding to my textblock in a grid.
However, some of the texts are not showing fully.
I tried the Text Wrapping and setting a maximum width to my textblock. But none of them worked.
EDIT : Hi again. I noticed that when I changed the text of the textblock manually via codes like
txtDesc.Text = "This is a job for Stackers. If you like stacking, please contact me.
The text wrapping actually works. So somehow the databind result text can't be wrap?
The XAML code for my textblock.
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize=" {StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
Any help here?
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="images/SmallLogoNTitle.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<toolkit:ListPicker ItemsSource="{Binding}" Name="lpkTypeOfService" Margin="0,116,12,0" Height="65" VerticalAlignment="Top" HorizontalAlignment="Right" Width="210" SelectionChanged="lpkTypeOfService_SelectionChanged">
</toolkit:ListPicker>
<ListBox Margin="8,210,8,26" Name="listBox1" Width="450">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock HorizontalAlignment= "Left" Grid.Row="1" Grid.Column="0" Name="Creator" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"></TextBlock>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"></TextBlock>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" Height="auto" Width="220" Margin="0,0,0,0" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" MaxWidth="220"></TextBlock>
<Button Content="Apply" Height="70" Width="140" Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Height="65" HorizontalAlignment="Left" Margin="12,116,0,0" Name="textBlock1" Text="Find Service :" VerticalAlignment="Top" Width="216" FontSize="36" />
</Grid>
</Grid>
It comes from poor / over-complicated layout architecture and the way your objects are positioning each other. Might try something like this for your DataTemplate
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!-- Don't worry, you already had your 450 Width set on the parent -->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Name="Date" Text="{Binding Date}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Creator" Grid.Row="1" Text="{Binding CreatorID}" FontSize="{StaticResource PhoneFontSizeLarge}"/>
<TextBlock Name="Type" Grid.Row="2" Text="{Binding Type}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Amount" Grid.Row="3" Text="{Binding Amount}" FontSize="{StaticResource PhoneFontSizeSmall}"/>
<TextBlock Name="Description" Grid.Row="4" Text="{Binding Description}" FontSize="{StaticResource PhoneFontSizeSmall}" TextWrapping="Wrap"/>
<Button Name="btn1" Click="btn_Click" Grid.Row="5" Grid.Column="1" Content="Apply" Height="70" Width="140" Margin="5,0"/>
</Grid>
</DataTemplate>
Also for the sake of cleaner xaml, remember things like Margin="0", Grid.Column="0", HorizontalAlignment="Left" etc. are default dependency properties, so no need to set them to each individual object. Even in the case you need to, you can apply them as Setters to the TargetType in the parent Object.Resources and avoid setting them to each individual object. Another tip would be, don't rely on a bunch of obfuscated random Margins etc to create your layout. It's best to do it right the first time instead of hunting down discrepancies between a bunch of inter-dependent little "fixes"
I didn't test it, but should work fine unless you got something else somewhere pushing stuff around. Hope this helps.
Can you disable horizontal scrolling in your listbox control?
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Use VerticalAlignment="Stretch" instead of VerticalAlignment="Top". This way the textblock will stretch to the height of the row.

Customize a particular item in the listbox on windows phone 7

I am using a listbox with a customized ItemTemplate style. It basically attach a button with each item in listbox. I want to show the last item in thge list box without button. How can i accomplish it?
.xaml file code is given below.
<!-- ListBox to display recordings -->
<ListBox Name="myListBox" Grid.Row="0"
HorizontalAlignment="Left" Width="470"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.ManipulationMode="System"
SelectionChanged="OnMemosListBoxSelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="3"
Padding="0"
HorizontalAlignment="Left"
VerticalAlignment="top"
Height="80"
Width="80"
Tag="{Binding BindsDirectlyToSource=True}"
Click="OnDeleteButtonClick">
<Button.Content>
<Image Source="/images/delete.png" Margin="0" Width="50" Height="50" />
</Button.Content>
</Button>
<TextBlock Grid.Column="1"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Grid.Row="0"
Text="{Binding fileName}"
VerticalAlignment="Center"/>
<StackPanel Grid.Column="1" Margin="0,0,0,17"
Grid.Row="1" Height="50"
Orientation="Horizontal"
VerticalAlignment="Top">
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="Recorded on " />
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding crDate}" />
<TextBlock Text=" Duration " />
<TextBlock FontSize="{StaticResource PhoneFontSizeNormal}" Text="{Binding duration}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Add a property, e.g. ShowButton to all your items, set it to false for the last item (true for all other items) in the collection and then in your DataTemplate show the button only when the proprerty is true
i don't know why the last item of list does not need that button , but i suggest to you, you can use longlistselector's ListFooterTemplate.
make footer item be independent.

Error when using <Scrollviewer> xaml

I am trying to use a but am getting the error:
The property 'Content' is set more than once.
It dissappears if I remove any one of the two lines of code in between the tags.
So neither of them seems wrong individually, but both together cause the problem.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="New Trip" Style="{StaticResource PhoneTextNormalStyle}" Height="40" />
<Button Content="Back" Height="71" Name="button1" Width="103" HorizontalContentAlignment="Stretch" VerticalAlignment="Top" HorizontalAlignment="Right" Click="button1_Click" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer>
<TextBlock Height="60" HorizontalAlignment="Left" Margin="65,12,0,0" Name="textBlock1" Text="Username" VerticalAlignment="Top" Width="169" />
<TextBox Height="78" HorizontalAlignment="Left" Margin="60,60,0,0" Name="textBoxUsername" VerticalAlignment="Top" Width="274" />
</ScrollViewer>
</Grid>
</Grid>
ScrollViewer can only have 1 content, so wrap the controls inside the ScrollViewer in a container like Grid, DockPanel, StackPanel
<ScrollViewer>
<StackPanel>
<TextBlock Height="60" HorizontalAlignment="Left" Margin="65,12,0,0" Name="textBlock1" Text="Username" VerticalAlignment="Top" Width="169" />
<TextBox Height="78" HorizontalAlignment="Left" Margin="60,60,0,0" Name="textBoxUsername" VerticalAlignment="Top" Width="274" />
</StackPanel>
</ScrollViewer>
Put your <TextBlock> and <TextBox> within another container, such as a StackPanel.

Windows Phone 7 - how to center a popup in a scrollviewer larger than the screen?

I hope someone can help with what should be a very simple problem to solve... I've spent hours on this and it's just driving me crazy!
In my Silverlight WP7 app I have a ScrollViewer control that is 600x600 and offset to the left by 60 pixels (to center it horizontally) and in this I have a number of images overlayed on each other (see the code below).
I also have a Popup control defined which pops up while the images are downloading from the web but I just can't get the PopUp centered - and even worse, the text inside it is NEVER centered even though I've specified it to be... it always justifies left no matter what I try.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="600"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Margin="-60,0,0,0" Height="600" Width="600" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="RadarImages" Margin="0,0,0,0">
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgBack" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgObs" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgLoop" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Popup x:Name="StatusPopup" Margin="-200,-100,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox Text="...loading..." Width="200" Height="60" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Black" Foreground="White" BorderBrush="White" BorderThickness="3" />
</Popup>
</Grid>
</ScrollViewer>
</Grid>
I've tried adding a Grid inside the popup to explicitly control the layout with no joy: the darned PopUp just won't center on the screen and the text inside won't either.
Can anybody suggest what I need to do to fix this?
TIA...
Mike
I've managed to get the Popup content using the following XAML (I added a couple of fixed background colors to show where different elements are):
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="600"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Margin="-60,0,0,0" Height="600" Width="600" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="RadarImages" Background="AliceBlue" Margin="0,0,0,0">
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgBack" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgObs" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgLoop" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Popup x:Name="StatusPopup" IsOpen="True">
<Border Background="Red" Height="768" Margin="60,0" Width="480">
<TextBox Text="...loading..." HorizontalAlignment="Center" VerticalAlignment="Center" Background="Black" Foreground="White" BorderBrush="White" BorderThickness="3" />
</Border>
</Popup>
</Grid>
</ScrollViewer>
</Grid>
Bascially, you can't use the Popup itself for position or alignment, you have to work with the root element inside the Popup instead.
One other thing: the valid range of values for Opacity are 0 to 1, not 100.

Resources