I have listbox and I am placing some labels in it.
<ListBox x:Name="lstContacts">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<HyperlinkButton Height="30" Margin="-10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{Binding PhoneType, Converter={StaticResource CntctConverter}}" Style="{StaticResource HyperlinkButtonStyle}"/>
<TextBlock Height="30" HorizontalAlignment="Left" Text="{Binding PhoneNumber}" Width="250" Foreground="{StaticResource TitleBrush}" Tap="lblMobile_Tap" VerticalAlignment="Top"/>
<TextBlock Height="30" Text="{Binding CallRate}" HorizontalAlignment="Right" Foreground="{StaticResource TitleBrush}" Margin="0,-30,0,0" VerticalAlignment="Top"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
My last label should come in extreme right as i made its horizontal alignment to right.
But its coming to center. Please see snapshot
Please suggest where I am making any mistake
Your StackPanel width is 250 because of the first TextBox width value, so it looks like the second TextBlock is positoned correctly to the right.
You need to increase the width of the stackpanel by adding a Width value to it.
This has to do with the default HorizontalAlignment of the ListBox. It defaults to Left. You'll need to change it to Stretch.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Related
i Would like to make simple ListBox. Each line should contain 2 controls, one aligned to the left the other to the right, thats all :)
I tried multiple approaches but nothing worked. My code is following
<StackPanel Grid.Row="1" Margin="12,0,12,0" Grid.Column="0">
<ListBox Name="ListBox" Margin="12,0,12,0" ItemsSource="Exercises" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width=">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
(Two textblocks are just for demonstration, in real application i'd like to bind one text block to real data, instead of second ill use button.)
When ill compile this, both textblock are aligned to the left, in emulator, it seems like one textblock with text "abcdef".
Any idea how to align one text block to the right and the other one to the left?
many thanks :)
By default the ListBoxItem does not fill the space it is given. It aligns itself and the content to the left. To ensure that the content of your ListBoxItem spans the entire width, you need to change the ItemContainerStyle
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Now the content will span the available width. If you wish to use a StackPanel as in your example, make sure to set it's HorizontalAlignment also. The StackPanel also does not fill in the available space given
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
However, I would recommend using a Grid and defining two columns
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
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 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.
I have a list box that uses a canvas in the ItemsPanel to lay out the items using binding on the Margin, this all works great. However clicking on the list box only fires once and always returns the last item in the listbox.
The Code:
<Grid>
<ListBox Name="lstItems" ItemsSource="{Binding Itemss}" Width="Auto" Height="497" Margin="0,40,0,10" SelectionChanged="ListBox_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Name="cnvItems">
</Canvas>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="{Binding XYMargin}">
<Border BorderBrush="Silver" BorderThickness="5" Height="{Binding XYWidth}" Width="{Binding XYWidth}" HorizontalAlignment="Left" Margin="0,0,0,0" Name="border5" VerticalAlignment="Top" Background="#81FFFFFF" CornerRadius="10" />
<StackPanel Margin="5,5,0,0" HorizontalAlignment="Center" Orientation="Horizontal">
<TextBlock Margin="0,0,0,0" Width="{Binding XYWidth}" Text="{Binding Label1}" TextAlignment="Left" FontSize="30" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Any ideas why I only get the last item in the list?
If you're using the Canvas to do layout, it is laying out the items in an ItemContainerStyle one on top of another, so the last item to be put in the canvas will be the only one visible. Think of laying a set of glass panes on top of one another and your items are simply drawing lower and lower on each new glass. You can still only touch the top glass, even though the item is drawn at the bottom.
Solution:
Try moving the
Margin="{Binding XYMargin}"
out of your data template and putting into your ItemContainerStyle.
Example: (simplified for clarity):
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot"
Margin="{Binding XYMargin}">
<ContentControl
x:Name="ContentContainer"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>