I have a horizontal listbox with 3 bindable items. How can I stretch them to all width of listbox? for example 1st element is at the left, 2nd element is at the middle and 3rd element on the right. Now I align them with margins, but I'm interested, is it possible without margins? I tried to set ListBox property HorizontalContentAlignment to Stretch, but not got what i want.
Thanks.
I tried your advice, but didn't get desirable result unfortunately. My XAML here:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem Content="1"/>
<ListBoxItem Content="2"/>
<ListBoxItem Content="3"/>
</ListBox>
Here what I get:
and what I want is below:
Try with following approach:
<ListBox Grid.Row="1">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text="1" HorizontalAlignment="Left"/>
<TextBlock Text="2" HorizontalAlignment="Center"/>
<TextBlock Text="3" HorizontalAlignment="Right"/>
</Grid>
</ListBoxItem>
</ListBox>
That's a tricky one :) To do that, you need to change ListBox.ItemContainerStyle, check out the answer on MSDN forum.
Also, check out the following links on this site:
How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox?
Silverlight 3: ListBox DataTemplate HorizontalAlignment
I'm not sure if you found a solution yet or not but this worked for me to get the items evenly spaced:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem Content="Item1"/>
<ListBoxItem Content="Item2"/>
<ListBoxItem Content="Item3"/>
</ListBox>
Found at: https://stackoverflow.com/a/1270813/124721
Then mixing in the ItemContainerStyle I could get the content centered:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
However I still wasn't able to get one item to aligned to the left, then another to the center, and the last one to the right. Applying the alignment to the item directly was shrinking the panel size. But maybe if it was wrapped in another container like a stack panel that would work.
Related
I am using listbox and wrappanel for displaying data.
For example:
<ListBox ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemHeight="150" ItemWidth="150">
</toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<DataTemplate x:Key="ItemTemplateListBoxAnimation">
<Grid Width="130" Height="130">
<Image Source="{Binding Image}"/>
</Grid>
</DataTemplate>
It's look like:
Now I need to use LongListSelector and grouping result:
<toolkit:LongListSelector ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}">
<toolkit:LongListSelector.GroupItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>
</toolkit:LongListSelector>
But it's look like:
I need to get:
Your assumptions?
Thank you
The issue is that the GroupItemsPanel property is not changing the ItemsPanel of the main list, but rather the ItemsPanel of the group headers, as can be seen here (image from http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios):
Unfortunately the WP toolkit doesn't seem to expose the ItemsPanel that you want, so you'll have to modify the toolkit source to get the behavior that you want.
Get the source from here: https://phone.codeplex.com/SourceControl/changeset/view/80797
Unzip, open up the Microsoft.Phone.Controls.Toolkit.WP7.sln solution in Visual Studio.
Under the Microsoft.Phone.Controls.Toolkit.WP7 project, open Themes/Generic.xaml
Scroll down to the Style that applies to LongListSelector (TargetType="controls:LongListSelector")
Change the TemplatedListBox.ItemsPanel to a WrapPanel
<primitives:TemplatedListBox.ItemsPanel>
<ItemsPanelTemplate>
<controls:WrapPanel/>
</ItemsPanelTemplate>
</primitives:TemplatedListBox.ItemsPanel>
Rebuild and reference the new dll, your items should wrap appropriately!
You can override it by using custom style
<toolkit:LongListSelector
Background="{StaticResource FCBackground}"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding NowShowingEvents}"
ItemTemplate="{StaticResource EventsListMediumItemTemplate}"
IsFlatList="True"
Style="{StaticResource LongListSelectorStyleCustom}"
>
</toolkit:LongListSelector>
<Style x:Key="LongListSelectorStyleCustom" TargetType="toolkit:LongListSelector">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:LongListSelector">
<toolkitPrimitives:TemplatedListBox x:Name="TemplatedListBox" Background="{TemplateBinding Background}">
<toolkitPrimitives:TemplatedListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</toolkitPrimitives:TemplatedListBox.ItemContainerStyle>
<toolkitPrimitives:TemplatedListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Margin="24,0,12,24"/>
</ItemsPanelTemplate>
</toolkitPrimitives:TemplatedListBox.ItemsPanel>
</toolkitPrimitives:TemplatedListBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have enabled snapping points in my app inside a ScrollViewer, as described in this question: Enabling ScrollViewer HorizontalSnapPoints with bindable collection
The problem that I am having is that as I am trying my app in a full HD monitor (1920x1080) and each item is 1400 px width. By the time that I have the scroll snapped in the item #n-1 I can't scroll to the last one, because it doesn't snap...
The hack I had to do was to add a "fake" item, transparent at the end, so I can scroll to the last item of my collection:
<Page.Resources>
<Style x:Key="ItemsControlStyle" TargetType="ItemsControl">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ItemsControl">
<ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}" HorizontalSnapPointsType="Mandatory" HorizontalSnapPointsAlignment="Near">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<ItemsControl Style="{StaticResource ItemsControlStyle}">
<Border Background="Red" Height="1000" Width="1400"/>
<Border Background="Blue" Height="1000" Width="1400"/>
<Border Background="Green" Height="1000" Width="1400"/>
<Border Background="Yellow" Height="1000" Width="1400"/>
<Border Background="Magenta" Height="1000" Width="1400"/>
<Border Background="Transparent" Height="1000" Width="1000" />
</ItemsControl>
The second problem that I'd have even using this hack, is that from a Metro App I don't have access to the screen size, so I couldn't even add a last item with variable width depending on the screen to fix this problem. Any Suggestions?
Thanks!
It seems that changing programmatically the width of the last item is the best solution, using Window.Current.Bounds.Width;
I found you can access the current screen size from within LayoutAwarePage.cs using the WindowSizeChanged event (e.Size)
That said, I'm sure there is probably a better way of accessing this event.
Solution provided before was correct just for small amount of cases (items with fixed sizes) and has issues with visual view.
UPDATE:
See example here Enabling ScrollViewer HorizontalSnapPoints with bindable collection
No "fake" items needed, as for the second: you do not need screen size just ItemsPresenter.Parent.ActualHeight(or Width, depending on used orientation of list) and items container width - see example.
chuanged HorizontalSnapPointsAlignment when ViewChanging , like this :
private void sv_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e)
{
if (e.NextView.HorizontalOffset <e.FinalView.HorizontalOffset)
{
sv.HorizontalSnapPointsAlignment = SnapPointsAlignment.Far;
}
else if (e.NextView.HorizontalOffset > e.FinalView.HorizontalOffset)
{
sv.HorizontalSnapPointsAlignment = SnapPointsAlignment.Near;
}
}
Im playing around with styles, and want to set the background of the Grid, something like this:
<Style TargetType="Grid">
<Setter Property="Background" Value="Background.png" />
</Style>
But this does not work, what is the correct way... and how could I do it like I do it with classes in css as I want it to affect every Grid, the one the wraps the page?
You can set the background property directly like so.
<Grid x:Name="ContentPanel" Style="{StaticResource GridStyle1}">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="/BackgroundImage.png"/>
</Grid.Background>
</Grid>
If you want to create a style resource, you can set the value like so
<phone:PhoneApplicationPage.Resources>
<Style x:Key="GridStyle1" TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/BackgroundImage.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid Style="{StaticResource GridStyle1}"/>
I recommend using Expression Blend to help you to discover how to work with styles. It will generate control templates for you so you can see how they are structured.
you can do it like this
<Grid x:Name="myGrid">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/myimage.png"/>
</Grid.Background>
</Grid>
I am new on using Sliverlight. Hope someone can help me. I need the image buttons to show the order is on the complete or process status. The click event functions of these two are same to navigate the same page. Currently I created two customer Image Button on App.xaml because the Source of this image cannot do “TemplateBinding” ; the button doesn’t has this property. Is it a better way to do it? If so, would you provide the code or link, so I can learn from it? Thanks.
There is my code:
<Style x:Key="btnComplete" TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<Image Height="50" Width="120" Stretch="none" Source="../images/btnComplete.png"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The simplest way to achive this is to create a transparent controltemplate for the button and add image as content to the button anywhere you want.
The button code in your page will be like below.
<Button Height="100" Width="100" Style="{StaticResource TransparentButtonStyle}" Click="TwitterBtn_Click">
<Image Height="100" Source="YourIcon.png" Width="100"/>
</Button>
And the TransparentButtonStyle can be declared in App.xaml . Thats all!
<Style x:Key="TransparentButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here's an implementation of ImageButton for wp7. I've used this example and modified it for various things:
http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/
Also you can check out the Codeing4Fun controls & source, specifically the buttons.
http://coding4fun.codeplex.com/
update: Telerik has an ImageButton control for wp7 now as well.
I'm sorry if the question title wasnt clear, but I'm trying to make something like this. I don't know if they are tiles or images inside a WrapControl:
I was thinking of making such thing with a wrap panel and each one of those blocks as a stackpanel. but I'm not sure if thats the right approach.
is there a control to do such thing?
You are on the right track. WrapPanel is the way to go :)
To make each block more interesting, you can take a look at the HubTile control from the latest windows phone toolkit. Whatever controls/panels you are using, just remember the size should be 173*173.
Use a ListBox
In one of my projects I created a ListBox that does all this. The reason that I use a ListBox is because ListBox has a SelectedItem propery which tells me which tile is tapped by the user. Also another reason is ListBoxItems can receive the nice tilt effect.
Baiscally you just need to create a tile-like ListBoxItem style and apply it to the ListBox's ItemContainerStyle, also you need to set the ListBox's ItemsPanel to be a WrapPanel.
How it looks
The ListBoxItem Style
<Style x:Key="TileListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="64"/>
<Setter Property="Margin" Value="12,12,0,0"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="173"/>
<Setter Property="Height" Value="173"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The ListBox
<!-- set its ItemContainerStyle which is the style for each ListBoxItem -->
<ListBox ItemContainerStyle="{StaticResource TileListBoxItemStyle}">
<!-- set its ItemsPanel to be a WrapPanel -->
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>
<Grid>
<TextBlock Text="Messages" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Path Data="M1.4901163E-05,9.8579922 L50.000015,46.316994 L100.00002,9.8579922 L100.00002,62.499992 L1.4901163E-05,62.499992 z M0,0 L100,0 L50,36.458 z" Fill="White" Height="38.125" Stretch="Fill" UseLayoutRounding="False" Width="61" d:IsLocked="True" />
<TextBlock Text="12" Margin="4,0,0,8" />
</StackPanel>
</Grid>
</ListBoxItem>
<ListBoxItem/>
<ListBoxItem/>
<ListBoxItem/>
<toolkit:HubTile Title="Me ☺" Message="..." Notification="new messages!" Source="xxx.jpg" Margin="12,12,0,0" />
</ListBox>
You can see the last item is actually a HubTile.
Hope ths helps! :)