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>
Related
I want to add the context menu to ListBox in WP7, I modify the data template as following below:
<ListBox Name="lbx1" Margin="10,0,10,0" Height="435" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" FontSize="40" Tap="lbx1_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Copy" Click="ListBoxGeneralCopy_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding .}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I can only cause tap and hold event to show the contextmenu above the text, the non-text region could not cause the event, I really confused. Does someone can help me?
Your textbloc will only occupy so much space as necessary. Therefore your stackpanel will also only be as wide as necessary.
You can set the HorizontalAlignment-value of both to stretch so it occupies the whole width:
<ListBox Name="lbx1" Margin="10,0,10,0" Height="435" ItemContainerStyle="{StaticResource ListBoxItemStyle1}" FontSize="40" Tap="lbx1_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Copy" Click="ListBoxGeneralCopy_Click"/>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding .}" HorizontalAlignment="Stretch"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Set StackPanel background property.
When background is transparent cannot work, and hold event is fired only in non-transparent region of stackpanel such as text-regions.
I have a list in which there are schedule name, date and time that are visible, but i want that on the long press of a particular item in a listbox there opens a context menu in which only description and schedule name of particular item is visible.
So my code in xaml is: first in the grid there is a listbox in which i have bound the whole list that is scheduleList ansd in the listbox.itemtemplate and inside the data templatei have binded the particular item to the textblock
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="scheduleListbox" ItemsSource="{Binding scheduleList}" Hold="scheduleListbox_Hold" Tap="scheduleListbox_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="150" Width="460">
<TextBlock x:Name="textBlock1" Text="{Binding ScheduleName}" Foreground="WhiteSmoke" FontSize="32"/>
<TextBlock x:Name="textBlock2" Text="{Binding ScheduleDate}" Foreground="Red" Margin="0,10,0,0"/>
<StackPanel Orientation="Horizontal" Height="70" Width="460" Hold="StackPanel_Hold">
<TextBlock x:Name="textBlock3" Text="{Binding StartTime}" Margin="0,5,0,0"/>
<TextBlock x:Name="textBlock4" Text="{Binding EndTime}" Margin="50,5,0,0"/>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="menuItem" VerticalOffset="100.0" IsZoomEnabled="True" >
<toolkit:MenuItem Header="Add to calender" ItemsSource="{Binding ScheduleName }"/>
<!--<toolkit:MenuItem Header="Description" ItemsSource="{Binding Description}"/>-->
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Please tell me that how to bind description and schedule name in context menu, either by code or by xaml.
How to bind data in context menu either through code or through xaml?
I create a breadcrumb context menu with binding using the code below. The code you should be interested in is the toolkit:ContextMenu.ItemTemplate section where you specify the bindings. Notice that you can also bind to a command parameter like I do with the index value.
The toolkit:ContextMenu.Template section is not needed. I added this to allow scrolling the items if there are more than will fit on the screen and also to move the menu to the bottom of the screen.
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu x:Name="breadCrumbContextMenu" ItemsSource="{Binding CloudViewModel.BreadCrumbMenuItems}" Opened="ContextMenu_Opened" Closed="Breadcrumb_ContextMenu_Closed">
<toolkit:ContextMenu.Template>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border Margin="0,700,0,0" BorderThickness="1" >
<ScrollViewer MaxHeight="700">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</toolkit:ContextMenu.Template>
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate>
<toolkit:MenuItem Click="breadcrumbMenuItem_Click" CommandParameter="{Binding Index}" Padding="0">
<toolkit:MenuItem.Header>
<StackPanel Orientation="Horizontal" Height="40">
<Image Source="{Binding Image}" Width="40" Height="40" />
<TextBlock Text="{Binding Text}" Margin="24,0,0,0" />
</StackPanel>
</toolkit:MenuItem.Header>
</toolkit:MenuItem>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
I want to create the content of the each item inside a ListBox dynamically - think of it as a list of items. Or think of a phone book application with contacts and each contact has one or more phone numbers that are displayed beneath the name; the name is one field, the phone numbers is a second field. But the content of the phone number field would obviously depend on the number of phone number the contact has.
Like:
Andrew Adams <-- TextBlock for name
650-123-2222 <-- "Item" for numbers
490-222-3333
Benny Benjamin
650-123-3333
I have tried to solve this by creating a second ListBox for the numbers item inside the main ListBox item. But I don't know how I can populate this second ListBox with a model from C#.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
<ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
<TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
</Grid>
Question would be: How can I set NumbersList ItemsSource from C#? Or can I solve my problem with some other better approach?
You need to set the ItemTemplate for your second ListBox. It should look like:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox Name="ContactResultsData" ItemsSource="{Binding Contacts}" Margin="24,0" Height="620">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="ContactName" Text="{Binding ContactName}" Style="{StaticResource PhoneTextLargeStyle}" />
<ListBox Name="NumbersList" ItemsSource="{Binding NumbersList}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Name="Number" Text="{Binding Number}" Style="{StaticResource PhoneTextSmallStyle}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
On a side note, don't give your UI elements name (Name or x:Name) unless you need to use them in code behind or from xaml. This is especially true for items within an ItemTemplate.
The inner can't directly contain a
If NumbersList is an IList or similar, then you can't bind to "Number" - simply use {Binding} instead
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 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.