I have a ViewModel with about 200 contacts and I am binding it to a ListView
<Grid>
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ScrollViewer>
</Grid>
Would be great if someone could explain the details behind the ScrollViewers visibility
A ListView control already contains a ScrollViewer and implements scrolling based on the amount of items, there is no need to wrap this control in another ScrollViewer. You can double check this in the default ControlTemplate of ListView at line 6219 in the generic.xaml file containing all Windows 10 styles:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
So you simply have to remove the ScrollViewer from your XAML fragment.
<Grid>
<ListView x:Name="ContactListing" ItemsSource="{Binding ContactListing}" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=DisplayName}" />
<Image Source="{Binding Thumbnail,Converter={StaticResource ResourceKey=contactConv}}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Note: As you're using a ListView, I suppose you want all your items stacked above each other. If you want multiple columns to show your items, use a GridView instead.
Related
I have flipview and inside flipview there is a webview. But I have a problem. If I binding too many items on this flipview my flipview get crashed. This is the xaml from my flipview
<FlipView Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Center" HorizontalContentAlignment="Center"
x:Name="BookPageContentFlipView" Tapped="OnBookPageContentFlipViewTapped"
DoubleTapped="OnBookPageContentFlipViewDoubleTapped"
ItemsSource={Binding BookPages} SelectionChanged="BookPageContentFlipViewSelectionChanged">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Webview Source={Binding Book}/>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
It just a sample but actually I load from local string. So how do I can bind many items to this flipview?
I have a collection defined as
public class BraiderList : ObservableCollection <Braider>
with the objects defines as
public class Braider : INotifyPropertyChanged
The XAML code for displaying the data is shown below. As far as it goes, everything works correctly but I'd like to change how the items in my collection are displayed. I'd like to have each item in my collection be a separate item in a wrap panel instead of them all being part of one control. Is there any way to do this in XAML or do I need to write the code in C# instead?
<Border Grid.Row="1" BorderBrush="Black" BorderThickness="5" CornerRadius="8" Margin="2,2" ClipToBounds="True" >
<WrapPanel Name="WPanel1">
<Border Margin="5" Padding="5">
<ItemsControl Name="MyList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Name="SPanel1">
<Image Source="{StaticResource BraiderImage}" Height ="75" Width="150" Visibility ="{Binding ShowIcon}"/>
<Label Content= "{Binding Name}" Visibility ="{Binding ShowName}" HorizontalAlignment="Center"/>
<Label Content= "{Binding ProductionCounter}" ContentStringFormat="Production Counter: {0:0.0}" Visibility ="{Binding ShowProductionCounter}" />
<Label Content= "{Binding LeadFront}" ContentStringFormat="Lead, Front Deck: {0:0.0}" Visibility ="{Binding ShowLeadFront}"/>
<Label Content= "{Binding LeadBack}" ContentStringFormat="Lead, Back Deck: {0:0.0}" Visibility ="{Binding ShowLeadBack}"/>
<Label Content= "{Binding Address}" ContentStringFormat="IP Address: {0}" Visibility ="{Binding ShowIP}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</WrapPanel>
</Border>
Your XAML seems wrong.
What you're looking for is to set the WrapPanel as the ItemsPanel of the ItemsControl, in such a way that the ItemsControl uses the WrapPanel to layout it's items rather than being inside the WrapPanel itself, like this:
<!-- No Need for a WrapPanel outside the ItemsControl, remove it -->
<Border>
<ItemsControl Name="MyList">
<!-- use a WrapPanel as the ItemsPanel for this ItemsControl -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- Rest of your XAML here -->
</ItemsControl>
</Border>
I'm trying to create an app with simple settings, with list boxes, etc.
I'm using C# and XAML.
I'm trying to implement something similar to the Camera app's photo settings settings panel.
Does anyone have any idea how to do this?
(I've tried Stackpanel - Scrollviewer - Stackpanel - content, however, couldn't get any transition)
You can try with ListBox,
<ListBox Grid.Row="0" ItemsSource="{Binding Settings}"
SelectionMode="Single" SelectedItem="{Binding CurrentSelectedSetting, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SettingName}"></TextBlock>
<TextBlock Width="5"></TextBlock>
</StackPanel>
<TextBlock Text="{Binding Description}" TextWrapping="Wrap"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I have searched extensively on Google and am struggling to find an easy example to follow for an ItemsControl which I think I need to be able to do the following.
I currently have a Grid with a scrollable Listbox containing Checkboxes which works as expected using the following XAML layout
<Grid>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding Selections}" Margin="12,22,12,94">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}"
Content="{Binding Path=Item.SelectionName}">
</CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
I now want to add a TextBox to the right of each Checkbox so it's aligned horizontally with 1 Checkbox and 1 Textbox per row. I thought I would have to use an ItemsControl to allow two controls but using the ItemsControl as below I lose the ability to scroll
<Grid>
<ItemsControl ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding Selections}" Margin="12,22,12,94">
<ItemsControl.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}"
Content="{Binding Path=Item.SelectionName}">
</CheckBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Also, if I try and add a textbox similar to
<DataTemplate>
<CheckBox IsChecked="{Binding sChecked}" Content="{Binding Path=Item.BookieName}" />
<TextBox />
</DataTemplate>
I get an error The object 'DataTemplate' already has a child and cannot add 'TextBox'
Essentially, I want it to look like this
Can anyone give me a few pointers on how to structure the controls in XAML to get my desired layout?
Just use a StackPanel in your DataTemplate and set the orientation to horizontal.
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox IsChecked="{Binding sChecked}" Content="{Binding Path=Item.BookieName}" />
<TextBox />
</StackPanel>
</DataTemplate>
I'm currently trying to figure out how to show different types of objects in a GridView, look at this Pic for example:
the last element on the right side is different than the other elements, so if i bind an observablecollection to the GridView, how can i say that the last element is shown up in anohter layout.
currently I'm using this XAML-Code
<GridView x:Name="startView" ItemsSource="{Binding}" Grid.Column="1" Grid.Row="2" SelectionMode="None" Width="Auto">
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
and this Code in the Back:
ObservableCollection<Movie> recentlyStarted = await Api.RecentlyStarted(3);
startView.DataContext = recentlyStarted;
but I have currently no clue how to let the last element show up in a different style
The easy way would be to have the two types of object as different classes (e.g. MoviePicStyle + MoviePlainStyle. Then move your DataTemplate out of the GridView, so that each object is picked up by type,
e.g.
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:MoviePicStyle}">
<StackPanel>
<TextBlock x:Name="DetailTitle" Height="74" Text="{Binding Title}" />
<Image x:Name="Image" Height="Auto" Width="Auto" Margin="0" Stretch="None" Source="{Binding LocalCoverUrl}" Visibility="Collapsed" />
</StackPanel>
<DataTemplate DataType="{x:Type ViewModel:MoviePlainStyle}">
...Different View...
</DataTemplate>
</Window.Resources>
<GridView...
Use template selector property of gridview and depending upon the type of object select the template. I did the same in my project. you need to write your own DataTemplateSelector.
I referred below link
http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/