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>
Related
I want to scale text and image content.I want to an output like that :
But result like that:
My code is below. What is the problem?
<UserControl.Resources>
<DataTemplate x:Key="ImageTemplate" x:DataType="model:NoteBlock">
<Grid>
<Viewbox Stretch="UniformToFill" StretchDirection="Both" Grid.Row="0">
<ScrollViewer MinZoomFactor="1" MaxZoomFactor="3" VerticalScrollMode="Disabled" HorizontalScrollMode="Disabled">
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="0" Source="{x:Bind BlockData}" Holding="Image_Holding" PointerPressed="Image_PointerPressed" />
</ScrollViewer>
</Viewbox>
</Grid>
</DataTemplate>
<DataTemplate x:Key="TextTemplate" x:DataType="model:NoteBlock">
<Grid>
<Viewbox StretchDirection="Both" Stretch="Uniform" VerticalAlignment="Top">
<RichEditBox Name="richEditor" BorderThickness="0" l:RtfText.RichText="{x:Bind BlockData}" Margin="0" GotFocus="richEditor_GotFocus" >
</RichEditBox>
</Viewbox>
</Grid>
</DataTemplate>
<DataTemplate x:Key="GapTemplate">
<Grid Height="20" >
</Grid>
</DataTemplate>
<l:NoteTypeTemplateSelector x:Key="NoteTypeTemplateSelector"
TextTemplate="{StaticResource TextTemplate}"
ImageTemplate="{StaticResource ImageTemplate}"
GapTemplate="{StaticResource GapTemplate}"></l:NoteTypeTemplateSelector>
</UserControl.Resources>
<Grid Name="ContainerGrid" Background="White" PointerPressed="ContainerGrid_PointerPressed" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<ToggleSwitch Margin="0" Name="Mode" HorizontalAlignment="Right" OffContent="Read Mode" OnContent="Edit Mode"></ToggleSwitch>
<ListView x:Name="NoteList" Background="Transparent"
Grid.Row="1"
ItemsSource="{x:Bind ds}"
ItemTemplateSelector="{StaticResource NoteTypeTemplateSelector}"
ScrollViewer.VerticalScrollMode="Enabled">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<SwapChainPanel Name="DxPanel" Grid.Row="0"></SwapChainPanel>
</Grid>
</UserControl>
Could you please help about that?
You can try using one of the Transform for your "ImageTemplate" and "TextTemplate" to scale the image/Text.
https://learn.microsoft.com/en-us/windows/uwp/graphics/transforms-overview
I think ScaleTransform should solve your problem.
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>
i have this xaml code:
<ListView Name="MyList" ItemsSource="{Binding MyItems}"
ScrollViewer.HorizontalScrollMode="Disabled" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=MyList, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.ColumnSpan="2" >
<TextBlock Text="{Binding aaa}" />
<TextBlock Text="{Binding bbb}" />
<TextBlock Text="{Binding ccc}"
TextWrapping="WrapWholeWords" TextTrimming="WordEllipsis" Height="25" MaxHeight="25" Margin="0,0,10,0" />
</StackPanel>
<TextBlock Grid.Column="1" Style="{StaticResource ListTitle}" Text="{Binding restaDaPagare}"
HorizontalAlignment="Right" Margin="0,0,10,0" />
<Canvas Grid.Column="2" Height="50" Width="50" Background="{StaticResource GrayBrush}"></Canvas>
<Image Grid.Column="2" Source="/Images/img.png"
Height="50" Width="50" MinHeight="50" MinWidth="50"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
For some reasons, if i use this instruction (row 5):
<Grid Width="{Binding ElementName=MyList, Path=ActualWidth}">
the first item of MyList disappears.
If i use this code:
<Grid Width="400">
everything works well... except that I don't want to use a static Width.
Thanks for any help!
You can try to not set any width for your Grid (in your template) and add this to your ListView
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This idea was "taken" from this question
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>
I trying to build a winRT metro application that use a GridView. I get the GridView and it looks like I want it to do. But the horizontal scroll doesn't work. When I drag the content it move but when I release it, it will return to start.
Anyone that know why it doesn't work?
<Page
x:Class="WR.Levels"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Wordy"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:uc="using:Wordy.UserControls"
mc:Ignorable="d">
<UserControl.Resources>
<CollectionViewSource x:Name="cvsLevels" IsSourceGrouped="True"/>
<CollectionViewSource x:Name="cvsCategories" IsSourceGrouped="True" ItemsPath="Levels"/>
</UserControl.Resources>
<Canvas x:Name="innertialCanvas"
Grid.Row="1"
Background="#FF3D6E4F"
>
<uc:BG HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="84"/>
<RowDefinition Height="700"/>
</Grid.RowDefinitions>
<StackPanel Margin="20,20,0,0" Grid.Row="0" Orientation="Horizontal">
<Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Margin="10" VerticalAlignment="Center" >Back</Button>
<TextBlock Name="appName" Text="WR" FontSize="48" VerticalAlignment="Center" />
</StackPanel>
<GridView ItemsSource="{Binding Source={StaticResource cvsCategories}}" Margin="0,0,0,0"
IsItemClickEnabled="True" SelectionMode="None" MaxHeight="700" Grid.Row="1"
AutomationProperties.AutomationId="LevelsGrid">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Width="150" Height="130" Margin="10" AutomationProperties.AutomationId="Level">
<StackPanel.Background>
<SolidColorBrush Color="White" Opacity="0.2" />
</StackPanel.Background>
<StackPanel Orientation="Horizontal" Margin="10">
<uc:Stars Height="50" Width="50" />
<uc:Stars Height="50" Width="50" />
</StackPanel>
<TextBlock Text="{Binding Name}" Margin="0,10,0,0" FontSize="24" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0">
<TextBlock Text='{Binding Name}'
Foreground="White" Margin="20"
Style="{StaticResource HeaderTextStyle}" AutomationProperties.AutomationId="LevelGroup"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Margin" Value="3,0"/>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
</Canvas>
</Page>
When I removed the canvas tag it worked!