Preview
alt text http://img39.imageshack.us/img39/5466/howtoorderhorizontal.jpg
On the highlighted item, the images still ordered vertically even I already use <StackPanel Orientation="Horizontal">. Am I missing something?
I don't want the images have ListBoxItem behavior (hover/click). I had added IsEnabled="False" to the list box, but the images' opacity decreased : ( Do you have any idea how to do this thing?
Data template
<!-- FacilityTreeView data template -->
<telerik:HierarchicalDataTemplate x:Key="FecilityTemplate" ItemsSource="{Binding Facilities}">
<StackPanel Orientation="Horizontal">
<ListBox ItemsSource="{Binding Icons}" BorderThickness="0" Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Source}" Margin=" 0,0,2,0" ToolTipService.ToolTip="{Binding Tooltip}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Text="{Binding Description}" VerticalAlignment="Center" />
</StackPanel>
</telerik:HierarchicalDataTemplate>
By using ItemsPanelTemplate.
<ListBox.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Source}" Margin=" 0,0,2,0" ToolTipService.ToolTip="{Binding Tooltip}" />
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ListBox.ItemsPanelTemplate>
You need to use <StackPanel Orientation="Horizontal"> as an ItemsPanelTemplate.
Read more here.
I was trying the solution and I found it's incomplete, ItemsPanelTemplate must be inside <ListBox.ItemsPanel>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Related
I want to display several images in a vertical scrolling list, but these images are subdivided into several groups that must be distiguishable by the user. To achive this, I use a ListView which items contain a WrapPanel, which contains the single images:
<ListView Name="ListGroups" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Label Content="{Binding Groupname}" />
<ListBox ItemsSource="{Binding Images}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Image Source="{Binding Thumb}" />
<Label Content="{Binding Res}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
What I get is:
Current result - wrong
but what I want to achive is:
Thats what I want
That is to say I dont want any horizontal Scollbars at all, and the groups clearly must be separated. On the other hand, when sizing the window, the images within one group must wrap to fill all available space.
Just also disable the horizontal ScrollBar of the inner ListBox, and set Stretch="None" on the Image element.
<ListView ... ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label Content="{Binding Groupname}"/>
<ListBox ItemsSource="{Binding Images}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding Thumb}" Stretch="None"/>
<Label Content="{Binding Res}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have this small stackpanel that gathers information from a class I have. I want the stack panels to go side by side instead of just stacking up on top of each other. This is the code I have
<SplitView.Content>
<Grid>
<ListView x:Name ="View">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel>
<TextBlock Text="{Binding title}"></TextBlock>
<TextBlock Text="{Binding location}"></TextBlock>
<TextBlock Text="{Binding date}"></TextBlock>
<TextBlock Text="{Binding desc}"></TextBlock>
<Button HorizontalAlignment="Right" FontFamily="Segoe MDL2 Assets" Content=""></Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</SplitView.Content>
I don't want them to go infinitly to the side though, just like 2 next to each other and then another 2 bellow, if that is possible
You can set ListView.ItemsPanel to a StackPanel with Horizontal Orientation.
<ListView x:Name ="View">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
I have an ItemsControl for which the ItemsSource is Binded. i coded it as per the below so that it would add the UserControl (showing the different items) to a StackPanel with a horizontal orientation that then contains a wrappanel to wrap the items inside but it is not working. All of the items are showing but they are all on one line and do not wrap to a new line when needed.
How can this code be fixed to include wrapping?
<ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto"
Grid.Column="0" Grid.Row="1">
<ItemsControl x:Name="tStack"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="1"
ItemsSource="{Binding Items.View}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel x:Name="stckPnl" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<WrapPanel>
<Viewbox HorizontalAlignment="Left" Height="400">
<Controls1:MyItemsUserControl Padding="5"/>
</Viewbox>
</WrapPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I have solved this issue by setting Width for WrapPanel. In below snippet i have binded WrapPanel width to its Parent Grid control named MainGrid and Path to its ActualWidth. Please see below snippet will helps you sometimes to solve your issue
<ItemsControl Name="ThemesItemControl"
Grid.Column="1"
Grid.Row="1"
ItemsSource="{Binding InstalledCollection}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0.5">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"
VerticalAlignment="Top"
Width="{Binding ElementName=MainGrid, Path=ActualWidth}"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Button Width="210"
Height="260"
Margin="20"
Tag="{Binding ID}"
Command="{Binding DataContext.ThemeSelectCommand,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}}}"
CommandParameter="{Binding RelativeSource={RelativeSource Self}}">
<StackPanel>
<Image Source="{Binding TileImage}"/>
</StackPanel>
</Button>
<TextBlock Text="{Binding Title}"
FontWeight="ExtraBold"
HorizontalAlignment="Center"
FontSize="15"
FontFamily="Segoe Print"
Foreground="Red"/>
<TextBlock Text="{Binding Description}"
HorizontalAlignment="Center"
FontSize="13"
FontFamily="Segoe Print"
Foreground="Red"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I'm trying to get the ListView to look like the MS Outlook Attachment-Control. I've already got the horizontal scrolling, but it still displays only one item in a row.
How can I get it to look like this?
What I've achieved so far:
<Grid x:Name="grdAttachments"
Grid.Row="4"
Grid.Column="1"
Grid.ColumnSpan="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="45" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65" />
<ColumnDefinition Width="15" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Margin="3,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Cursor="Hand"
Text="Angefügt:" />
<ScrollViewer Grid.Row="0" Grid.Column="2">
<ListBox x:Name="libAttachments"
Background="Transparent"
ItemsSource="{Binding Attachments}"
MouseDoubleClick="lvAttachments_MouseDoubleClick">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
<StackPanel.ContextMenu>
<ContextMenu>
<ContextMenu.Items>
<MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
<MenuItem.Icon>
<Image Source="/Images/magnifier.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
<MenuItem.Icon>
<Image Source="/Images/disk-black.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu.Items>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
It sounds like what you want is an ListBox with a custom ItemsPanel.
<ListBox>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
The snippet above configures a ListBox to use a WrapPanel as the layout provider or "ItemsPanel" for the items it is to present. From there it may make sense to implement a custom Item Container style, and/or custom Data Templates. You could easily apply a DataTemplate as you did above if you are using an MVVM pattern and data binding to a collection (preferably observable)
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
</StackPanel>
</DataTemplate>
To complete this picture, a scroll viewer can be used so long as it's height is constrained by either a parent layout control (Grid.Row = 1 where RowDefinition Height="constant") or my an explicit height being set on the ScrollViewer.
My final solution based on yours looks like this:
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<ListBox
ItemsSource="{Binding Attachments}"
MouseDoubleClick="lvAttachments_MouseDoubleClick"
SelectionMode="Single">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
<StackPanel.ContextMenu>
<ContextMenu>
<ContextMenu.Items>
<MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
<MenuItem.Icon>
<Image Source="/Images/magnifier.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
<MenuItem.Icon>
<Image Source="/Images/disk-black.png" Stretch="None" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu.Items>
</ContextMenu>
</StackPanel.ContextMenu>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
A few things to note: When possible, consider using Commands instead of events, they can lead to looser coupling. Introducing a Behavior might even make sense if the behavior it's self is something that you might have other places in your project or re-usability is ideal.
Ok so where it seems you got snagged up was with your ListBox still pushing things in single column fashion and the lack of ability to give you something to fire off say a click event. So what I had in mind was something more like this;
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="300" HorizontalContentAlignment="Stretch">
<ItemsControl ItemsSource="{Binding Collection}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="5,0" Orientation="Horizontal">
<Image Source="{Binding MimeTypeIcon}" Stretch="None" />
<HyperlinkButton Margin="5,0,0,0" Text="{Binding File.Name}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
I wasn't to sure what you were trying to do with your magnifier and disk though I see your Clicks for them, but you can add those to this layout however you like, just a note though, I just free-handed this between meetings so never built it but should work fine. If not we'll plug at it again. Main differences are changing to a hyperlinkbutton to give you click and some other subtle differences from Firoso's but his is still technically sound, or should be anyway :)
Here is the XAML markup:
<ScrollViewer Grid.Column="1" Grid.Row="2" HorizontalScrollBarVisibility="Disabled" Width="990">
<StackPanel Margin="50 0 0 40">
<ItemsControl x:Name="streamList" ItemsSource="{Binding StreamInformations}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10" Orientation="Horizontal" >
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageUrl}" Height="60" />
<StackPanel Margin="10 0 0 0" VerticalAlignment="Center">
<TextBlock Foreground="Black" Text="{Binding ChannelName}" FontSize="12" />
<TextBlock Foreground="#999" Text="{Binding PlayerName}" FontSize="10" />
<TextBlock Foreground="#999" Text="{Binding ViewCount}" FontSize="10" />
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
And this is how it looks:
I'd like these items to appear horizontally and flow down when it reaches the edge of the StackPanel.
It seems that currently, each item in my DataContext collection is creating it's own StackPanel, so this isn't what I want.
Any suggestions?
If you change the ItemsPanel template to either a WrapPanel or horizontal StackPanel, you can achieve the effect you are after...
<ItemsControl>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<!--other stuff here-->
</ItemsControl.ItemTemplate>
</ItemsControl>
In this snippet, the ItemsPanel is set to a WrapPanel oriented horizontally. The ItemTemplate would include the binding and styling you already have...