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.
Related
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>
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.
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>
I'm just starting out in WinPhone development and can't figure out how to set the vertical scroll. For example i've started a new Pivot App, and this code allows the user to scroll up and d own to see all the entries:
<controls:PivotItem Header="Login">
<!--Double line list with text wrapping-->
<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">
<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>
</controls:PivotItem>
Now when, I add my own pivot item, with a stackpanel with more items than can be seen on the screen at any one time, it will not allow me to scroll to see them all. What am I missing here?
Thanks.
Add ScrollViewer over the StackPanel and it will make it scrollable.
The ListBox in the example code that you supplied ha built-in scrolling functionality. However, if you are not using something that already has this scrolling functionality in it, you will have to add a ScrollViewer.
<controls:PivotItem Header="Example">
<ScrollViewer Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="Example1" FontSize="150" />
<TextBlock Text="Example2" FontSize="150" />
</StackPanel>
</ScrollViewer>
</controls:PivotItem>
In a pivot control, if the content is overflowing the vertical page then there should be default "vertical" scrolling available to you.
I had a similar control with list box bounded to property. Having "list" should automatically allow you to scroll.
Don't add a scrollviewer over the stack panel as it would make the scrolling enabled for each list item which you don't want.
<controls:PivotItem Header="all authors" Foreground="#FF0C388A">
<Grid>
<ListBox Margin="0,0,-12,0" ItemsSource="{Binding AllAuthorsList}" Foreground="#FF0C388A">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="Auto">
<TextBlock Tap="TextBlockAuthor_Tap" Text="{Binding}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" Foreground="#FF0C388A"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</controls:PivotItem>
i would like know how can i add a style when a item of the listbox is selected.
I have the following listbox:
<ListBox x:Name="ListBoxDays"
VerticalAlignment="Top"
ItemTemplate="{StaticResource WeekDayTemplate}"
ItemsSource="{Binding WeekDayList}" />
And i also have a DataTemplate to the listbox.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="WeekDayTemplate">
<StackPanel x:Name="stackPanel" Orientation="Horizontal" Width="400" Margin="12,0,0,10" Height="100" >
<StackPanel VerticalAlignment="Center" Orientation="Vertical">
<TextBlock Text="{Binding WeekDayName}" Style="{StaticResource PhoneTextExtraLargeStyle}" TextWrapping="Wrap" TextTrimming="WordEllipsis" Foreground="{StaticResource PhoneRadioCheckBoxPressedBorderBrush}" UseLayoutRounding="True" />
<TextBlock Text="{Binding ShortDate}" Style="{StaticResource PhoneTextTitle2Style}" TextWrapping="Wrap" TextTrimming="WordEllipsis" Foreground="{StaticResource PhoneBorderBrush}" Margin="25,0,12,0" />
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
At the moment when i select an item of the listbox no color change happens.
You have to change the style of the template ListBoxItem which the ListBox generates for each of the items that it renders. Your updated template needs to customise the Selected visual state. You can then associate this new template with your ListBox via the ListBox.ItemContainerStyle property.
There is a good tutorial, with sourcecode to download, here:
http://windowsphonegeek.com/tips/How-to-customize-the-WP7-ListBox-Selected-Item--Part1-Control-Template