How to bind the items count of listview in XAML - xaml

I have a problem with binding the count to the textblock.
I have a listview that it's items are binded to a Users object properties.
I want to get the count of all items that were binded.
Here is my ListView:
<ListView ItemsSource="{Binding Users}" x:Name="lvUsers">
<ListView.ItemTemplate>
<DataTemplate>
<ListViewItem IsHitTestVisible="False">
<StackPanel>
<facebookControls:ProfilePicture Height="74" Width="74" ProfileId="{Binding FacebookId}" />
<TextBlock Text="{Binding UserName}" FontSize="18" HorizontalAlignment="Center" />
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And here is my TextBlock:
<TextBlock Text="{Binding ElementName=lvUsers, Path=Items.Count, Mode=OneWay}" />
What am I doing wrong?
I know that if my ListView will be without Templates, just ListViewItems, it will work, but I need it to be like that.

Override the template for this ListView.
The sample below basically creates a style where it overrides the control template such that the regular ListView items (the ItemsPresenter) is wrapped in the StackPanel so that the TextBlock with count or whatever else can be added at the bottom.
<ListView ItemsSource="{Binding Users}">
<ListView.Style>
<Style TargetType="{x:Type ListView}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="1" BorderBrush="LightGray">
<StackPanel>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
<TextBlock Margin="0,4" FontWeight="Bold">
<Run Text="Count: "/>
<Run Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListView}}, Path=Items.Count, Mode=OneWay}"/>
</TextBlock>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ListView.Style>
<ListView.ItemTemplate>
<DataTemplate>
<ListViewItem IsHitTestVisible="False">
<StackPanel>
<facebookControls:ProfilePicture Height="74" Width="74" ProfileId="{Binding FacebookId}" />
<TextBlock Text="{Binding UserName}" FontSize="18" HorizontalAlignment="Center" />
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Related

Sending SelectedIndex of ListView to ViewModel through CommandParameter

after a quite bit of googling I haven't found answer on this problem.
I have this ListView
<ListView x:Name="itemListView" ItemsSource="{Binding History}" HorizontalAlignment="Stretch">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border Style="{StaticResource Border}" Background="{ThemeResource GradientLinear}" HorizontalAlignment="Stretch">
<Grid>
<StackPanel Orientation="Vertical" Margin="10,10,10,10" HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0">
<TextBlock Text="{Binding name}" />
<TextBlock Text="{Binding question}" TextWrapping="Wrap"/>
<TextBlock Text="{Binding vrijeme}"/>
</StackPanel>
<Button Width="50" Height="50" Opacity="0.6" Grid.Row="0" Grid.Column="1" Tag="{Binding name}"
Command="{Binding ElementName=itemListView, Path=DataContext.Delete}" CommandParameter="{Binding ElementName=itemListView, Path=SelectedIndex}"
HorizontalAlignment="Right">
<SymbolIcon
HorizontalAlignment="Center"
Width="48"
Height="48"
Symbol="Delete" />
</Button>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Problem is probably in this part of the code
<Button Width="50" Height="50" Opacity="0.6" Grid.Row="0" Grid.Column="1" Tag="{Binding name}"
Command="{Binding ElementName=itemListView, Path=DataContext.Delete}" CommandParameter="{Binding ElementName=itemListView, Path=SelectedIndex}"
HorizontalAlignment="Right">
When I click Button, ListViewItem that contains that Button is not selected so I get -1 for SelectedIndex or just null if I target SelectedItem. It seems that clicking that button leaves containing ListViewItem unaffected. If I first click ListViewItem and than click button it works, SelectedItem is set in ListView of course, but I can't count user will understand that. My question is - is there any way to "force" Button to send me in CommandArgument SelectedItem or SelectedIndex. I know how to do that through code-behind but I am interested in solving this problem through MVVM.
Thanx in advance.

Horizontally grouped ListView in Windows Store apps

I want the groups in my grouped ListView to show horizontally instead of vertically. I tried this solution, but the groups are still under each other instead of next to each other. Arranging ListView items Horizontally
Here's my XAML (this is the original, unmodified):
<ListView Name="slotlist"
ItemsSource="{Binding Source={StaticResource cvsDelivery}}"
Margin="0,0,10,0"
IsItemClickEnabled="True"
ItemClick="onSlotBooked">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ActualWidth, ElementName=grRoot}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding timeRange}" Grid.Column="0" FontWeight="Bold"
Margin="10,0,0,0"
Foreground="{Binding Fontcolor}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="{Binding slotPrice}" Grid.Column="1" FontWeight="Bold"
Margin="0,0,20,0"
Foreground="{Binding Fontcolor}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Style="{StaticResource BaseTextBlockStyle}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Text="{Binding date}"
Foreground="#FF005299"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
To get the ListView to be shown horizontally you can modify the ItemsPanel, like so:
<ListView>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>

StackPanel Orientation stops page load

First to explain what I am doing here, I want to create a page that list a large number of grouped objects. Selecting an object binds that information to a display on the left. Everything works fine till I change the MainStack Orientation to Horizontal. Once that is changed the page no longer loads. No errors are thrown. When stepping through the process the code behind steps through as it should.
I know its the XAML but am baffled by the cause. It works fine under two circumstances.
If I drop the mainstack stack panel and instead make the display group the header of the GridView it works.
If I put the MainStack orientation to Vertical it loads fine.
Here is the code that does not load:
<StackPanel Name="MainStack" Orientation="Horizontal" Grid.Row="2" >
<StackPanel Name="Stack" Width="480" >
<TextBlock Text="{Binding Nname}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding Nset}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding url}" Height="Auto" Margin="0,0,102,55" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<ScrollViewer Margin="0,0,0,0" MaxHeight="200">
<TextBlock Text="{Binding Nruling}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</ScrollViewer>
</StackPanel>
<SemanticZoom x:Name="semanticZoom" Width="Auto" >
<SemanticZoom.ZoomedOutView>
<GridView Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" GroupHeaderPlacement="Top" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding url}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nname}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Nname}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nset}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nruling}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<!-- Horizontal scrolling grid -->
</StackPanel>

Display ListViewItems as Circles

What's the best way to display items in a listview as circles?
I want to embed the name of the item within the circle.
Do I use a ItemContainerStyle?
I assume I use a controltemplate. However, I'm confused as I consider its relationship with the ItemContainerStyle.
What's wrong with the following code?
<ListView ItemsSource="{Binding Contacts}"
CanDragItems="True" DragItemsStarting="OnDragItemStarting">
<ListViewItem Style="{StaticResource ContactsListItemStyle}" />
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<ContentControl Content="{Binding DisplayName}">
<ContentControl.Template>
<ControlTemplate>
<ContentControl>
<Grid>
<Ellipse Fill="LightGray" Height="50" Width="50" />
<Viewbox>
<ContentControl Margin="20" Content="{TemplateBinding Content}" />
</Viewbox>
</Grid>
</ContentControl>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The following XAML works:
<Page.Resources>
<ControlTemplate x:Key="ContentControlTemplate" TargetType="ContentControl">
<ContentControl>
<Grid>
<Ellipse Fill="LightGray" Height="200" Width="200" />
<Viewbox>
<ContentControl Margin="20" Content="{TemplateBinding Content}" />
</Viewbox>
</Grid>
</ContentControl>
</ControlTemplate>
</Page.Resources>
<ListView ItemsSource="{Binding Contacts}"
CanDragItems="True" DragItemsStarting="OnDragItemStarting">
<ListViewItem Style="{StaticResource ContactsListItemStyle}" />
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<ContentControl Template="{StaticResource ContentControlTemplate}"
Content="{Binding DisplayName}" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Windows Phone 8 xaml textblock binding format

I would like to format a textblock which is bound to a value, to show "R" before the actual value, is this possible, cause I cannot directly change the value?
Thank you
<ListBox x:Name="lstbundleListbox"
Foreground="White"
Height="320"
HorizontalAlignment="Center">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Center" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding name}"
TextWrapping="Wrap"
HorizontalAlignment="Center" />
<TextBlock Text="{Binding cost}"
TextWrapping="Wrap"
HorizontalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
So I basically want the textblock to show R(cost)
use Run
<TextBlock>
<Run Text="R" />
<Run Text="{Binding cost}" />
</TextBlock>
or use StringFormat
<TextBlock Text="{Binding cost, StringFormat=R{0}}" />
i think this can be done by
<StackPanel Orientation Horizontal>
<TextBlock Text="R(" />
<TextBlock Text="{Binding cost}"/>
<TextBlock Text=")" />
</StackPanel>
distance between them can be set by setting padding of the textblocks...