I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>
Related
I have a simple layout that basically displays a list of items in ListView using an ItemsWrapGrid as the panel template. The problem I am having is that the first image in the ListView is always bigger than the rest, even with a fixed width / height set. I am completely stumped.
An image of the problem:
The ListView XAML is:
<ListView ItemsSource="{Binding Currencies}" ItemTemplate="{StaticResource PortfolioCurrencyTemplate}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" Width="Auto" Height="Auto"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
The data template:
<Page.Resources>
<DataTemplate x:Key="PortfolioCurrencyTemplate" x:DataType="viewModels:PortfolioViewModel">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="2"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="1" MaxWidth="100" MaxHeight="100" Source="https://www.cryptocompare.com/media/19633/btc.png"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Symbol}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding LastPrice}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Page.Resources>
Instead of using ListView and changing ItemsPanelTemplate to create a GridView Effect and tackle issues one by one, I would suggest you switch to AdaptiveGridView.
You can install Nuget Package for UWP Community Toolkit from Here
Add below namespace to your page
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
Now your ListView needs to be replaced like below.
<controls:AdaptiveGridView ItemsSource="{Binding Currencies}"
ItemTemplate="{StaticResource PortfolioCurrencyTemplate}"
DesiredWidth="250"/>
Output from Designer
Good Luck.
I have the following ListView in my xaml layout:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<TextBlock Text="{StaticResource AppName}" Style="{StaticResource TitleTextBlockStyle}"/>
</StackPanel>
<StackPanel Grid.Row="1">
<ListView x:Name="lstStatus">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12">
<Image Source="ms-appx:///Assets/Logo.png" Margin="12" Width="150" Height="150"></Image>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path='Fullname'}" Style="{StaticResource ListViewItemSubheaderTextBlockStyle}"></TextBlock>
<TextBlock Text="{Binding Path='FormattedCreationTime'}" TextWrapping="WrapWholeWords"></TextBlock>
<TextBlock Text="{Binding Path='Text'}" Style="{StaticResource ListViewItemContentTextBlockStyle}" TextWrapping="WrapWholeWords" Margin="12"></TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</Grid>
However, I met two problems:
The list is not scrollable when it is longer than the screen.
The TextBlocks does not wrap at all although I already set TextWrapping.
I am pretty new to Windows Phone design. Please tell me where did I do wrong.
The StackPanel takes as much space as it needs. As the ListView grows, the StackPanel expands to allow it to grow, hence you cannot scroll to see the items you don't see on the screen.
Put the ListView in a Grid or limit the Height of the StackPanel.
<Grid Grid.Row="1">
<ListView x:Name="lstStatus">
...
Similar problem occurs in your ItemTemplate, and the fix is also similar.
<DataTemplate>
<Grid Margin="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image ...
<StackPanel Grid.Column="1">
<TextBlock ....
</StackPanel>
</Grid>
</DataTemplate>
Following code I had. I am using a Listbox using binding. Below the list box I have a button for submit. Able to scroll Listbox items only unable to scroll the button. Button is available at the bottom of the screen(not List). I want this button at the bottom of the Listbox?.
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="780" MaxHeight="1800" VerticalAlignment="Top">
<ScrollViewer.Content>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Name="formDetails" ItemsSource="{Binding}" Grid.Row="0" Height="780" MaxHeight="1800">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="1" Click="Button_Click" Content="Submit"/>
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
Try this for button at the bottom of the Listbox:
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Click="Button_Click" Content="Submit"></Button>
</StackPanel>
</ScrollViewer>
for button at the bottom of the page
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question" Text="{Binding Q}"></TextBlock>
<TextBox Name="TxTAnswer" Text="{Binding A}"></TextBox>
<CheckBox Name="BoolVal" IsChecked="{Binding Val}"></CheckBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<Button Click="Button_Click" Content="Submit" Grid.Row="1"></Button>
</Grid>
A few things:
You have defined your button as being in Grid.Row="1" which doesn't exist. You need to add a second row otherwise it will just appear in the same row as the ListBox.
Your entire page is within a ScrollViewer, is that really what you want? If you want the Button outside of the scrollviewer then just wrap the ListBox within the ScrollViewer, but that would be kind of pointless because a ListBox has its own ScrollViewer built in.
I have a stackpanel which sometimes contains more data than can fit on the screen. When this happens I'm unable to scroll down to see the rest of the list. So I added a ScrollViewer to fix this but I'm unable to get it working. This is the code:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer Height="500" Name="Scroller" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical" Name="Stack" Height="2000">
<TextBlock Text="{Binding BookableExplanation}" Foreground="#336699" TextWrapping="Wrap"/>
<Button Visibility="{Binding ShowLinkToSite, Converter={StaticResource BooleanToVisibilityConverter}}" cal:Message.Attach="[Event Click] = [Action OpenStuntOnWebAsRegularOffer]" Foreground="#FFFFFF" Background="#336699" BorderThickness="0">neckermann.be</Button>
<ListBox x:Name="DepartureDates" MinHeight="2000"
cal:Message.Attach="[Tap]=[Action OpenStuntOnWeb(DepartureDates.SelectedItem)]">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid DataContext="{Binding}" Background="#336699" Margin="0,10,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="430"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,10,10,10">
<TextBlock Text="{Binding Date, StringFormat='dd/MM/yyyy'}" Foreground="#FFFFFF" TextWrapping="Wrap" TextAlignment="Center"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</Grid>
Any ideas ? On other views I just have text that scrolls fine, it's only when adding items dynamically that I ran into issues. Saw some posts here also about problems with the scrollviewer but followed those advice such as setting scrollviewer height lower than the stackpanel but didn't work. It's probably something really simple but can't find it :) It does the scrolling movement but just doesn't allow me to go down.
Thanks,
Jorn
I managed to fix it by reworking my XAML. It seems the stackpanel was the problem. Behavior is slightly different now but I can live with it.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="0,0,0,5">
<TextBlock Text="{Binding BookableExplanation}" Foreground="#336699" TextWrapping="Wrap"/>
<Button Visibility="{Binding ShowLinkToSite, Converter={StaticResource BooleanToVisibilityConverter}}" cal:Message.Attach="[Event Click] = [Action OpenStuntOnWebAsRegularOffer]" Foreground="#FFFFFF" Background="#336699" BorderThickness="0">neckermann.be</Button>
</StackPanel>
<ListBox Grid.Row="1" x:Name="DepartureDates"
cal:Message.Attach="[Tap]=[Action OpenStuntOnWeb(DepartureDates.SelectedItem)]">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid DataContext="{Binding}" Background="#336699" Margin="0,10,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="430"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="1" Orientation="Vertical" Margin="10,10,10,10">
<TextBlock Text="{Binding Date, StringFormat='dd/MM/yyyy'}" Foreground="#FFFFFF" TextWrapping="Wrap" TextAlignment="Center"/>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
Listbox has inbuilt Scroll viewer. So if you manually add scroll viewer, both controls will fight each other.
Do remove your scroll viewer. Will work.
I have a Windows Phone 8 app using XAML/C#. My app has an ItemsControl that relies on a data template. My DataTemplate looks like the following:
<DataTemplate x:Key="myTemplate">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" TextTrimming="WordEllipsis" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="customerMenuItem" Foreground="White" Header="View Customer Profile" Click="customerMenuItem_Click" Tag="{Binding Path=CustomerName}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
<TextBlock Text="{Binding Summary}" TextWrapping="NoWrap" Grid.Row="1" Style="{StaticResource PhoneTextSmallStyle}" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Column="1"><!-- Stuff here --></StackPanel>
</Grid>
</DataTemplate>
This DataTemplate is referenced in the main part of my XAML as shown here:
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.ColumnSpan="2" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="myItemsControl" ItemTemplate="{StaticResource myTemplate}" ItemsSource="{Binding Customers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Please note, the "toolkit" namespace comes from clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit. When I hold my finger (or mouse) on the TextBlock, a context menu appears. However, I never see the words "View Customer Profile". I just see a block box that represents the context menu itself. I know that the item is there though. I know because the customerMenuItem_Click event successfully fires. I have a MessageBox in there that shows the value of the Tag. That value is always correct. For some reason though the menu item text is not appearing. What am I doing wrong?
You put Foreground = "White". Context menu is on white background. That is why you don't see your menu item.