I've created a listbox like this
<ListBox Name="lstNews" SelectionChanged="lstNews_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,12,12" Width="180" Height="180">
<Grid.Background>
<ImageBrush>
<ImageBrush.ImageSource>
<BitmapImage CreateOptions="BackgroundCreation" UriSource="{Binding Picture}" />
</ImageBrush.ImageSource>
</ImageBrush>
</Grid.Background>
<StackPanel Background="#AA000000" VerticalAlignment="Bottom" Height="70" >
<TextBlock Foreground="White" TextWrapping="Wrap" VerticalAlignment="Bottom" FontSize="16" Text="{Binding Title}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I need to add a shrinking effect when the user taps on an item. I've seen a lot of apps do that, I dunno how.
I assume you are talking about the tilt effect, which can be found in the wp7 toolkit.
You can set it at the global level by doing this,
<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
toolkit:TiltEffect.IsTiltEnabled="True">
Some good tutorials.
Related
Is it possible to make a datatemplate for ItemsControl, which would 'enlarge' selected item's content beyond ItemsControl height, overlapping other ItemsControl items - but without altering ItemsControl height/width, without shifting adjacent ItemsControl items.
I have interaction triggers and bindings etc, just need UI elements capable of that.
Tried Popup element - but it doesn't look to be the best solution.
EDIT:
Thanks again for your replies, I tried to post a simplier description of my problem - and that was my mistake, sorry. Heres the EXACT problem:
(tried to apply ScaleTransform - it makes my ScrollViewer larger)
<s:SurfaceScrollViewer MaxWidth="1920" Margin="50" ClipToBounds="False"
VerticalAlignment="Center" HorizontalAlignment="Center"
Visibility="{Binding Path=ScrollViewerYearVisibility}">
<ItemsControl HorizontalAlignment="Center" BorderBrush="Red" BorderThickness="3"
ItemsSource="{Binding Path=YearItemsSource}"
ItemTemplate="{StaticResource DataTemplateYearItem}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</s:SurfaceScrollViewer>
<DataTemplate x:Key="DataTemplateYearItem">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="False">
<Grid.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick" Command="{Binding Path=CommandDeviceDoubleClick}"/>
</Grid.InputBindings>
<Image VerticalAlignment="Center" HorizontalAlignment="Center"
Width="200" Height="200" Stretch="None"
Source="{Binding Path=ContentImagePathCurrent}">
</Image>
<Image VerticalAlignment="Center" HorizontalAlignment="Center" ClipToBounds="False"
Margin="-248,-210,0,0"
Stretch="None"
Source="{Binding Path=SlideCurrent.ContentImagePath}">
<Image.RenderTransform>
<ScaleTransform ScaleX="3" ScaleY="3"/>
</Image.RenderTransform>
</Image>
</Grid>
</DataTemplate>
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 :)
I have a code like that:
<ListBox Height="522" HorizontalAlignment="Left" Margin="20,162,0,0" Name="listBox1" VerticalAlignment="Top" Width="448" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<Image Source="{Binding IconSource}" Height="48" Width="48" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding Text}" FontSize="36" VerticalAlignment="Top" Margin="0,20,20,0" Width="380" Height="Auto"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In Listbox i have 2 for-loop elements - image (icon) and text.
I need to fill the background of a particular image, but I do not know how to do it. In other words:
sorry for little stupid question and thanks for answers.
If I understand your problem correctly, you just need to add a background to the StackPanel. Change the color and opacity properties until you get the effect that you want.
<ListBox Height="522" HorizontalAlignment="Left" Margin="20,162,0,0" Name="listBox1" VerticalAlignment="Top" Width="448" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Padding>
<StackPanel.Background>
<SolidColorBrush Color="Black" Opacity="0.4" />
</StackPanel.Background>
<Image Source="{Binding IconSource}" Height="48" Width="48" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="370">
<TextBlock Text="{Binding Text}" FontSize="36" VerticalAlignment="Top" Margin="0,20,20,0" Width="380" Height="Auto"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I need to make the ListBox expand to fit the width it has available. Here's the XAML:
<ListBox Grid.Row="2" Height="400" ItemsSource="{StaticResource Notes}" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="90" Margin="5">
<TextBlock Text="{Binding Title}" FontSize="30" />
<TextBlock Text="{Binding Text}" FontSize="15" />
<Rectangle Fill="#1192D4" Height="2" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Please take a look at this post
A ListBoxItem that fills its parent
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>