hiii
i have a listbox in my app every row content of some photos what i want is to put all those photos in my listbox to one photo to apply share it on facebook
i want to put my photos in listbox with the same order to one photo to make me able to share it to facebook or twitter
and this is my nested listbox
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<!--<TextBlock Padding="3,0,3,0"
Text="{Binding}" Foreground="DarkRed" FontSize="{StaticResource PhoneFontSizeSmall}"/>-->
<ListBox x:Name="phoronic_son" ItemsSource="{Binding}" Foreground="Black" Margin="82,228,71,209" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<!--<TextBlock Padding="3,0,3,0"
Text="{Binding StringFormat='{}{0}.jpg'}" Foreground="DarkRed" FontSize="{StaticResource PhoneFontSizeSmall}"/>-->
<Image Source="{Binding StringFormat='{}{0}.jpg'}" Height="80" Width="80"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Related
I'm trying to make a Listview with 2 columns, exactly like this picture:
http://i62.tinypic.com/10mrd5x.png
(Items most be vertical and exactly like the picture)
I know about WrapGrid and I can use this
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="2"
HorizontalAlignment="Center"
VerticalChildrenAlignment="Stretch"
HorizontalChildrenAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
but this is too bad for what I want! this makes unlimited Columns when items is more than of screen height(when add 100 items to listview)
but I want just only 2 columns with unlimite rows.
My questions is:
Is this possible?
if Yes how can I do it?
sorry for my poor english
I did the same thing in WP 7.8 using the ListBox. /this is the part of my old project. Sorry for large number of useless tags and parameters :)
<ListBox
Height="573"
HorizontalAlignment="Left"
Name="MyWallslistBox"
VerticalAlignment="Top"
DataContext="{Binding}"
ItemsSource="{Binding}"
Tap="wallslistBox_Tap"
Width="480"
Margin="0,-10,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="10,10,0,0">
<Image
Source="{Binding Image}"
Height="225"
Width="225"
HorizontalAlignment="Left"
/>
<StackPanel
Orientation="Vertical"
HorizontalAlignment="Stretch"
Margin="-227,-3,-10,0">
<StackPanel
Background="#56000000"
HorizontalAlignment="Left"
VerticalAlignment="Top"
MaxHeight="225"
Margin="2,3,0,0"
Width="225"
Height="225">
<TextBlock
TextWrapping="Wrap"
MaxWidth="235"
HorizontalAlignment="Left"
Text="{Binding Title}"
Foreground="White"
FontSize="24"
Margin="10,4,0,0"
/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="480" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I need to create a vertical scrolling list view with grouping enabled as shown below:
This is what I currently have:
<common:VariableSizeListViewWithSelection ItemsSource="{Binding Source={StaticResource cvs}}"
ScrollViewer.VerticalScrollBarVisibility="Auto"
IsItemClickEnabled="True"
ItemTemplateSelector="{StaticResource summaryViewTemplateSelector}" >
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<TextBlock Grid.Column="0" Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" FontWeight="SemiBold" Foreground="#333333" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<common:VariableSizeListViewWithSelection.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" Margin="0">
<TextBlock Text='{Binding Title}' Foreground="Black" Margin="5" Style="{StaticResource HeaderTextBlockStyle}"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" Width="300" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</common:VariableSizeListViewWithSelection.GroupStyle>
</common:VariableSizeListViewWithSelection>
But this is not working as expected and it creates a listview with correct grouping but with just one column like this:
Can you please point me as to what am I doing wrong?
We took it offline for a bit and it seems like changing the ItemsPanel of the ListView to a StackPanel make this work. I have a feeling the default ItemsStackPanel should still support grouping, but perhaps not with a custom group layout panel. Maybe there is a way to reconfigure a GridView to scroll vertically and this could work too.
how can I start items on a new row in a listbox which is orientated horizontally? this is my code so far, but it shows al the items in 1 row, thanx in advance
<phone:PanoramaItem Header="Geklassifiseerd" Orientation="Horizontal" Foreground="Black">
<ListBox x:Name="geklassifisseerd_list">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap"
Margin="10,0"
Foreground="Black"
FontSize="20"
/>
<TextBlock Text="{Binding Date}"
TextWrapping="Wrap"
Foreground="Black"
Margin="10,-2,10,0"
FontSize="20"
/>
<TextBlock Text="{Binding Image_uri}"
TextWrapping="Wrap"
Margin="10,-2,10,0"
Foreground="Black"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
got the answer, I used a wrappanel in the itemspanetemplate, which led to assemblies clashing, which I solved by reinstalling the Microsoft.phhone.controls assembly via nugget
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Controls:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<GridView
Grid.Row="1"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
ItemsSource="{Binding ServiceOrderList}"
ItemTemplate="{StaticResource ServiceOrderListItemTemplate}"
SelectedItem="{Binding SelectedServiceOrder, Mode=TwoWay}"
IsSwipeEnabled="false">
<winRtBehaviors:Interaction.Behaviors>
<behaviors:EventToBoundCommandBehavior
Command="{Binding ServiceOrderItemClickCommand}"
Event="Tapped" />
</winRtBehaviors:Interaction.Behaviors>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" MaximumRowsOrColumns="3" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
I want use to be able to do a left click on the items of gridview but dosn't want to allow them to right click and select an item, please help.
If you don't want the items to be selectable at all, set SelectionMode="None" and IsItemClickEnabled="True" along with setting an ItemClick event.
If you want them to be selectable, but only left click, you can set IsRightClickEnabled="False".
Another way is put RightTapped event in your GridView.ItemTemplate which is implement : e.Handled = true
<GridView>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="30,10"
Width="350" Tapped="Grid_Tapped_1" RightTapped="Grid_RightTapped">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image Height="40" Source="{Binding Path=Image}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="0,-3,11,0"/>
<TextBlock FontSize="24" FontWeight="SemiBold" FontFamily="Segoe WP" Foreground="#232323" Text="{Binding Path=RoomTypeString}" VerticalAlignment="Center"/>
</StackPanel>
<TextBlock FontSize="24" Text="{Binding Path=RoomCountString}"
Foreground="#232323" FontFamily="Segoe WP"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
have a semantic zoom control in an application where I've got three groups (today, tomorrow and later), but the groups don't necessarily always have at least one item. The semantic zoom control works perfect when all three groups are non-empty, but not whenever any of the items are empty. I've tried clearing out my DataTemplate to ensure it's nothing to do with the bindings, and I couldn't find an event to hook on to so that I could potentially step through what was going on when the zoom-out event is triggered.
Has anyone got this working, or have any ideas/suggestions/tips/workarounds?
some code:
XAML - collectionviewsource:
<!-- Collection of grouped items displayed by this page -->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="True"
ItemsPath="Items"
d:Source="{Binding ItemGroups, Source={d:DesignInstance Type=data:AuctionDataSource, IsDesignTimeCreatable=True}}"/>
XAML - semantic zoom control:
<SemanticZoom Visibility="Collapsed" Grid.Row="1" Name="MainSemanticZoom">
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Margin="116,0,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="Multiple"
SelectionChanged="itemGridView_SelectionChanged_1">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="200" RightTapped="Grid_RightTapped_1" Tag="{Binding}">
<Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
<!--bindings: Title , CurrentBid, CloseDate -->
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Height="20" Style="{StaticResource TitleTextStyle}" Margin="15,0,15,0"/>
<TextBlock Text="{Binding CurrentBid, Converter={StaticResource FormatStringConverter}, ConverterParameter='\{0:C}'}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,0"/>
<TextBlock Text="{Binding CloseDate, Converter={StaticResource FriendlyTimeConverter}}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
<Border Visibility="{Binding IsLeading, Converter={StaticResource BooleanToVisibilityConverter}}" Name="leadingBlock" Background="CadetBlue">
<TextBlock Text="leading" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
<Border Visibility="{Binding IsOutbid,Converter={StaticResource BooleanToVisibilityConverter}}" Name="outbidBlock" Background="Orange">
<TextBlock Text="outbid" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
<Border Visibility="{Binding NoBids,Converter={StaticResource BooleanToVisibilityConverter}}" Name="noBidsBlock" Background="Gray">
<TextBlock Text="you have not placed a bid" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="5,0,30,10">
<!--<Button
AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"/>-->
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextStyle}"></TextBlock>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView
x:Name="itemZoomOutGridView"
AutomationProperties.AutomationId="ItemZoomOutGridView"
AutomationProperties.Name="Grouped Items"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left">
<Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
<Image Height="750" Source="{Binding Group.Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Height="140" Width="400" Background="Orange" VerticalAlignment="Center">
<TextBlock Margin="15" Text="{Binding Group.Title}" Foreground="White" Style="{StaticResource HeaderTextStyle}"></TextBlock>
<TextBlock Margin="15" Grid.Row="1" Text="{Binding Group.Items.Count}" Foreground="White" Style="{StaticResource HeaderTextStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Margin="230,0,0,0" Width="2000" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
I "solved" this by handling the ViewChangeStarted and the ViewChangeCompleted events of the SemanticView control. In the ViewChangeStarted event I added a new item, so that group won't be empty, and in the ViewChangedCompleted event I removed it. It's not a fix, just a workaround, but it does the job.
I don't think this is SemanticZoom issue. We reported very similar issue with GridView with grouped source. If any of the groups were empty we got exception. In fact CollectionViewSource is the likely culprit in this.
Our solution was not to use GridView with grouping. You can configure ItemsControl to look just like grouped GridView. The only downside to this is that you can't select items from different groups at the same time, but for us it was not an issue, since we didn't need selection.