Windows Phone 7 - ListBox and Stackpanel sizes - windows-phone-7

I Have a little problem with a ListBox and its elements. As you can see in my code, the stackpanel for both textblocks is set to 250. This is set like this because otherwise the text expands in 1 line and you cannot see the button. As obvious the problem is that setting this parameter as static, if the resolution or the orientation changes wont fit the screen completely. I would like to know if there is a way to set this width dynamically.
<ListBox x:Name="attractionsListbox" Margin="0,0,-12,0" ItemsSource="{Binding Attractions}" Loaded="attractionsListbox_Loaded">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Tag="{Binding Name}" Tap="AttractionListBoxItem_Tap">
<Image Height="140" Width="140" Margin="0,5,0,0" Source="{Binding Thumbnail}" MaxWidth="140" MaxHeight="140" Stretch="Fill" />
<StackPanel Width="250">
<TextBlock x:Name="AttractionName" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}" FontSize="20" Foreground="Black" FontWeight="Bold" />
<TextBlock Text="{Binding ShortDescription}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSmallStyle }" Foreground="Black" />
</StackPanel>
<Button Width="80" Height="80" Padding="10,3,10,5" BorderBrush="Black" Click="Add_Todo_Click" Tag="{Binding Name}">
<Button.Background>
<ImageBrush ImageSource="/SundsvallWP7;component/Images/appbar.add.rest.png"/>
</Button.Background>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
(In android there is weights, where you can assign the weight of each control, don't know if this exists in Windows Phone).
Thank you very much.

A DockPanel may work better for your scenario than a StackPanel. Put the button on the right and the image on the left, then your middle StackPanel content will flow to fill.
http://www.windowsphonegeek.com/articles/Using-DockPanel-in-WP7.
Alternatively, there are only the two orientations and resolution shouldn't be changing. You could just bind the Width to the Orientation with a value converter.

Related

How to make image and text align with checkbox

I have created a multiselectlist that included a stackpanel and with images and text that each correspond to a checkbox control. My implementation works correctly, although I cannot get the image and text to align correctly with the checkbox! I was wondering if there was a better way than simply adjusting the margins, but if not how could this be accomplished?
MainPage.xaml
<toolkit:MultiselectList x:Name="connectionTypeMultiSelectList" HorizontalAlignment="Left" VerticalAlignment="Top" Tap="connectionTypeMultiSelectList_Tap">
<toolkit:MultiselectList.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0"/>
<TextBlock Text="{Binding Name}" Margin="10"/>
</StackPanel>
</DataTemplate>
</toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>
Try setting the height of the stackpanel and specify the image to fit and text as TextAlign=Center.
Try the following margin values in your design and let me know if it works or not. It worked for dummy data which I created. I hope it works for you too.
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0,-12,0,0"/>
<TextBlock Text="{Binding Name}" Margin="12,5,0,0"/>
</StackPanel>

Set a background image to Listbox item

I'm able to set an image to Listbox using the background property.
But how do I set a desirable image as a background to items of the listbox?
Thanks.
You'll have to redefine the ItemTemplate property of the ListBox. If you're not confident with XAML, you should try using Expression Blend.
Here is an example of how you're XAML could look like. I created a new application using the Pivot Template application.
<ListBox x:Name="FirstListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="78">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Koala.jpg"/>
</StackPanel.Background>
<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So the default ItemTemplate uses a StackPanel as main container. What you want to do here, is to set the image as the background of that StackPanel. That's what the following lines stands for:
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Koala.jpg"/>
</StackPanel.Background>
With the above code, you set an ImageBrush as the Background property of the StackPanel.
With that code, each ListBoxItem will display a koala.
Wrapping the listbox item using border and setting the background might help.Follow this sample
<Border Width="380" Height="60" Margin="0,0,0,10" >
<Border.Background>
<ImageBrush ImageSource="Images/menu_bg.png" />
</Border.Background>
<TextBlock Foreground="Black" FontSize="22" Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>

How to make wp7-ish entry forms?

How to make a stacked form such as when editing contact details? I suppose it is a StackPanel, but how about TextBlock/TextBox fonts and margins? Just placing them in StackPanel leaves too much of a gap between them vertically, and text in Blocks is not aligned with Box borders.
Use {StaticResource PhoneTextSubtleStyle} for your labels. It will set the fontsize, the foreground and the margin for 12,0,12,0. TextBoxes' default margin is the same. If your stackpanel in your layout root has the same margin too, the whole form will be "wp7-ish"... :)
Here is an example:
<StackPanel Margin="12,0,12,0"
Grid.Row="1">
<TextBlock Text="{Binding Strings.Settings_Nickname}"
Style="{StaticResource PhoneTextSubtleStyle}" />
<TextBox Text="{Binding Nickname, Mode=TwoWay}"
InputScope="PersonalGivenName"/>
<TextBlock TextWrapping="Wrap"
Text="{Binding Strings.Settings_NicknameInfo}"
Style="{StaticResource PhoneTextNormalStyle}"
Margin="12,0,12,24" />
<TextBlock Text="{Binding Strings.Settings_Language}"
Style="{StaticResource PhoneTextSubtleStyle}" />
<toolkit:ListPicker x:Name="LanguagePicker"
Margin="12,0,12,12" />
<TextBlock TextWrapping="Wrap"
Text="{Binding Strings.Settings_LanguageInfo}"
Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>
As Kylerr mentioned, always use WP7 in-built Styles for formatting the TextBlocks... it will align itself. Also use MetroGridHelper from NuGet, which will help you in aligning the controls.

listBox traumatic error # WP7

i created an app to track tweets and binding it to listBox.
and, here is the xaml of the listBox:
<ListBox Margin="0,0,-12,0" x:Name="listBox1" ItemsSource="{Binding Items}" SelectionChanged="listBox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,0,0,17">
<!--Replace rectangle with image-->
<Image Height="100" Width="100" Source="{Binding DeveloperImage}" Margin="12,0,9,0"/>
<StackPanel Width="311">
<TextBlock Text="{Binding DeveloperName}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding DeveloperBirthday}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
but, when it was debugged, it returned into this sequence:
long blank
content
blank
what i want is:
content only, no blanks befor the content and no blanks after the content.
The way a ListBox arranges its Children is determined by its ItemsPanel.
You can replace the default ItemsPanel by setting the ItemsPanelTemplate.
Each Child is then wrapped in an ItemContainer.
You can replace the default ItemContainer by setting the ItemContainerStyle.
Finally, the ListBox itself has a border, padding and margin that influence where the ItemsPanel is placed.
So if you want to adjust the placement of the content of the listbox you will first have to find out what template(s) should be modified. A quick way is to use Blend because it will give you visual feedback.

Scroll PanoramaItem Header in 'wide' PanoramaItem

I'm interested in creating my own 'Hub' Panorama. I've gotten the 'wide' PanoramaItem working, but I'm trying now to mimic the behavior seen in the Marketplace hub, where the PanoramaItem Header scrolls as you move across the hub.
I'm looking for a way for it to smoothly animate to the end of the hub. Has anyone tried this before, or have any suggestions?
I'd imagine it would be something like this:
//OnPanoramaViewChanged
//get X location of viewport
//animate title to X location
However it doesn't appear that the Panorama has a ScrollViewer attached property.
In case you're curious, here's how I made a wide panorama item.
<controls:PanoramaItem ScrollViewer.HorizontalScrollBarVisibility="Visible" Header="movies" Orientation="Horizontal" Width="900">
<controls:PanoramaItem.HeaderTemplate >
<DataTemplate >
<StackPanel>
<TextBlock Foreground="{StaticResource PanoramaHeaderBrush}" Text="{Binding}">
</TextBlock>
</StackPanel>
</DataTemplate>
</controls:PanoramaItem.HeaderTemplate>
<StackPanel>
<!-- line list with image placeholder and text wrapping -->
<ListBox ItemsSource="{Binding Items}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Grid Background="{StaticResource ControlTitlesInactivePivotBrush}" Width="173" Height="173" >
<TextBlock FontSize="24" Text="Movie Title (2010)" TextWrapping="Wrap" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
<Rectangle Fill="White" Height="48" Width="48" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Test;component/movie_icn.png" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<TextBlock Text="Movie Title:" Margin="12,0,12,0" Foreground="Black" />
<TextBlock Text="The Title" Margin="12,-6,12,0" Foreground="Gray"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</controls:PanoramaItem>
The Silverlight Panorama control doens't support the behaviour you're after or provide the ability to customize it in a way that will let you do it.
If you really want this then you'll need to build your own control from scratch. I would expect this to be more effort than is justified. Just avoid creating a very wide PanoramaItem instead.

Resources