I have a listbox-news and listbox-comments, I tried to show:
listbox-news
listbox-comments
But no success.
I have video of my problem, and here is the xaml:
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:delay="clr-namespace:Delay;assembly=PhonePerformance"
xmlns:local="clr-namespace:iVk"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
x:Class="iVk.newsDetail"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<Grid Height="auto" Grid.Row="2" Grid.ColumnSpan="2" Margin="0,0,0,21" >
<ListBox Style="{StaticResource ax3}" x:Name="detailnewslistBox">
<ListBox.ItemTemplate>
<DataTemplate>
<local:FoodTemplateSelector Content="{Binding}">
...
</local:FoodTemplateSelector>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
<Grid Height="auto" Margin="0,0,0,21" >
<ListBox x:Name="comm_box" ItemsSource="{Binding}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
<StackPanel VerticalAlignment="Top">
<TextBlock Text="{Binding text}" Padding="11,0,0,0"/>
<TextBlock x:Name="datetimetext" Text="{Binding date_time}" Width="310">
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
you need to wrap two listboxs in a scrollViewer and disable scroll of your listboxes:
<ScrollViewer VerticalScrollBarVisibility="Enabled">
<StackPanel>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" />
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" />
</StackPanel>
</ScrollViewer>
Related
I'm trying to use a ScrollViewer to be able to scroll the items in an ItemsControl but for some reason, it's not working. The scroll view shows but it is disabled.
<UserControl x:Class="Tool.Views.ShortcutsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignWidth="500"
mc:Ignorable="d" Height="541">
<UserControl.Resources>
<Style x:Key="GlobalShortcutButtonTemplate" TargetType="{x:Type Button}">
<!-- Style code -->
</Style>
</UserControl.Resources>
<Grid Margin="10,40,10,0" Background="White" Height="108" VerticalAlignment="Top">
<ScrollViewer CanContentScroll="True">
<ItemsControl
ItemsSource="{Binding ShortcutsObservableCollection}"
Height="108" VerticalAlignment="Top" HorizontalAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button
Height="35"
Content="{Binding ShortcutName}"
Command="{Binding ShortcutCommand}"
CommandParameter="{Binding FilePath}"
Margin="10 0 0 10"
Background="#FF30CCFF"
Foreground="White"
Padding="10,0"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</UserControl>
This is what I see...
There are plenty of items in the ItemsControl for the scroller to show and be able to scroll the items in it, the rest of the items are hidden.
Any idea what can I do to make the scroller to show up properly?
Just remove Height="108" from your ItemsControl. You can't scroll because there is nothing to scroll.
I am displaying around 1000+ images in my WPF application. All these images are grouped using "GroupID" property. Since I have to take care of memory ,I have used VirtualizingStackPanel and secondly I am using WrapPanel to display all these images as per space accumulated by my ListView.
My solution works fine for small set of images and WPF wrap panel removes the Virtualization effect when items are grouped. Thus i googled this problem and found out we can use VirtualWrapPanel.
I tried it but i started to get Exception
"_owner was null." at VirtualWrapPanel
"_owner.InvalidateScrollInfo();"
MainWindow.cs
List<SearchData> myData = new List<SearchData>();
GetData(ref myData);
listView.ItemsSource = myData;
//Grouping code
CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(myData);
PropertyGroupDescription groupDescription = new PropertyGroupDescription("GroupId");
view.GroupDescriptions.Add(groupDescription);
MainWindow.cs
<Window x:Class="WpfItemVirtualization.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfItemVirtualization"
xmlns:dz="clr-namespace:DevZest.Windows.DataVirtualization;assembly=DevZest.DataVirtualization"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="ListViewItem">
<Setter Property="dz:VirtualListItemBase.AutoLoad" Value="true" />
</Style>
<DataTemplate x:Key="ThumbGridTemplate" >
<VirtualizingStackPanel x:Name="OuterStackPanel" Height="253" Width="230" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White">
<VirtualizingStackPanel x:Name="InnerStackPanel" Height="{Binding Height, ElementName=OuterStackPanel}" Width="{Binding Width, ElementName=OuterStackPanel}" >
<Grid Margin="0,0,0,0" Height="253" Background="#FFCDCDCD">
<TextBlock TextTrimming="CharacterEllipsis" Text="{Binding FilePath}" FontFamily="Segoe UI" Foreground="Black" HorizontalAlignment="Left" TextAlignment="Left" Margin="0" FontSize="12" Height="20" Background="{x:Null}" Width="Auto" VerticalAlignment="Top"/>
</Grid>
</VirtualizingStackPanel>
</VirtualizingStackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<ListView x:Name="listView"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingStackPanel.VirtualizationMode="Recycling"
ScrollViewer.IsDeferredScrollingEnabled="True"
dz:GridViewSort.AutoSort="True"
dz:VirtualListLoadingIndicator.IsAttached="False" ItemTemplate="{StaticResource ThumbGridTemplate}"
Margin="0,35,0,0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<local:VirtualizingWrapPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="#FF3E3E3E" Height="30" Margin="0,1,0,1">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding GroupId, StringFormat={}Duplicate \Group {0}}" Foreground="Black" FontSize="14" FontFamily="Segoe UI Semibold" VerticalAlignment="Center" Margin="20,0,0,0"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</Grid>
Any suggestion will be helpful. Thank you.
I am having a problem with DataTemplates used in a WPF ItemsControl. I want to be able to "bring forward" any of the items in the list so that they are on top of everything else in the list, but haven't had any luck.
Here's a simple example that illustrates the problem. What I want to see is achieved in the example using a WrapPanel and a bunch of colored blocks:
The first block overlaps the second. Good. When I try to do the same thing with the ItemsControl, the first block falls underneath the second, despite its ZIndex:
How can I make the first block overlap all the others in the ItemsControl?
From my understanding of the ZIndex property, I am assuming that I need to set the ZIndex higher up in the Visual Tree than the Border inside of the DataTemplate, but don't know how or where to do that.
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:MainViewModel x:Key="mainViewModel" />
<DataTemplate DataType="{x:Type local:FireFighter}">
<Border Background="Pink" Padding="8" Panel.ZIndex="10" Margin="4">
<Border.RenderTransform>
<TranslateTransform X="18" Y="4"/>
</Border.RenderTransform>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}"/>
</StackPanel>
</Border>
</DataTemplate>
<DataTemplate DataType="{x:Type local:PoliceOfficer}">
<Border Background="Orange" Padding="8" Margin="4">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding FirstName}"/>
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>
<StackPanel>
<ItemsControl DataContext="{StaticResource mainViewModel}"
ItemsSource="{Binding People}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<WrapPanel Margin="0,10,0,0">
<Border Background="Blue" Width="30" Height="30" Margin="4" Panel.ZIndex="10">
<Border.RenderTransform>
<TranslateTransform X="18" Y="4"/>
</Border.RenderTransform>
</Border>
<Border Background="Green" Width="30" Height="30" Margin="4"/>
<Border Background="Green" Width="30" Height="30" Margin="4"/>
</WrapPanel>
</StackPanel>
I found an answer that will work for my situation right here:
https://stackoverflow.com/a/9687758/4912801
It turns out that setting the Panel.ZIndex property wasn't working because WPF inserts a ContentPresenter element for each item in the ItemsControl. In my application, I was trying to get whatever element the mouse is hovering over to come to the front, so applying a style to all ContentPresenters in the ItemsControl allowed me to bring them to the front when the mouse was over them.
I was looking for something similar and this is what did it for me. Use a UniformGrid as your ItemsPanelTemplate, then change the margins on your DataTemplate to overlap as much as you want.
<Grid Grid.Row="1"
Grid.ColumnSpan="2">
<Grid.Resources>
<local:PointsToPathConverter x:Key="pointsToPathConverter"/>
</Grid.Resources>
<Image
Source="{Binding Bmp}"
Stretch="Fill"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" />
<ItemsControl ItemsSource="{Binding AllTraceLines}"
VerticalAlignment="Stretch"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Path Margin="0,-20,0,-20" Data="{Binding Converter={StaticResource pointsToPathConverter}}" Stroke="Red" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Stretch="Fill"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
I have a usercontrol that has a tab control. Within each tab i have some regions declared.
<TabControl Style="{DynamicResource HomeScreenTabControlStyle}">
<TabItem Header="home"
Style="{DynamicResource HomeScreenTabItemStyle}">
<StackPanel Orientation="Horizontal">
<StackPanel Name="BacklogPanel" Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.FullLeftBoxRegion}">
</StackPanel>
<StackPanel Orientation="Vertical">
<StackPanel Name="ToDoPanel" Style="{DynamicResource HalfLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.HalfTopBoxRegion}">
</StackPanel>
<StackPanel Name="MeetingPanel" Style="{DynamicResource HalfLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.HalfBottomBoxRegion}">
</StackPanel>
</StackPanel>
<StackPanel Name="SprintPanel" Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.FullSecondLeftBoxRegion}">
</StackPanel>
<StackPanel Name="StoriesPanel" Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.FullRightBoxRegion}">
</StackPanel>
</StackPanel>
</TabItem>
<TabItem Header="sprints"
Style="{DynamicResource HomeScreenTabItemStyle}">
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal">
<StackPanel Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.SprintBacklog}">
</StackPanel>
<StackPanel Orientation="Vertical">
<StackPanel Style="{DynamicResource HalfLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.PeopleOnSprint}">
</StackPanel>
<StackPanel Style="{DynamicResource HalfLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.SprintDetails}">
</StackPanel>
</StackPanel>
<StackPanel Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.SprintTaskBacklog}">
</StackPanel>
<StackPanel Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.SprintMyTasks}">
</StackPanel>
</StackPanel>
</StackPanel>
</TabItem>
Currently to navigate to this HomeScreenView im doing something like this...
_regionManager.RequestNavigate(RegionNames.ContentRegion, new Uri("/HomeScreenView", UriKind.Relative));
Is there anything i can pass to the region manager so that it will set the Sprints Tab to be the tab navigated to, and not the home tab?
Thanks
Probably the easiest possible way is to make views from those TabItems as well. And region from TabControl. So You navigate to your View with TabControlRegion and probably in OnNavigateTo method from INavigationAware interface you would navigate to HomeTabItemView and SpritsTabItemView
public void OnNavigatedTo(NavigationContext navigationContext)
{
this.regionManager.RequestNavigate(RegionNames.TabControlRegion, new Uri(ViewNames.HomeTabItemView, UriKind.Relative));
this.regionManager.RequestNavigate(RegionNames.TabControlRegion, new Uri(ViewNames.SpritsTabItemView, UriKind.Relative));
}
TabControlRegion
<Window x:Class="Onii.Vespa.UI.Shell.Desktop.Shell"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Regions="clr-namespace:Microsoft.Practices.Prism.Regions;assembly=Microsoft.Practices.Prism" MinHeight="640" MinWidth="820" WindowState="Maximized">
<Grid Height="Auto">
<TabControl TabStripPlacement="Top" Regions:RegionManager.RegionName="TabControlRegion" HorizontalContentAlignment="Left" Margin="0,3,0,20" />
</Grid>
Views will be like this:
<UserControl x:Class="MyNamespace.HomeTabItemView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:prism="clr-namespace:Microsoft.Practices.Prism.Regions;assembly=Microsoft.Practices.Prism"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<StackPanel Orientation="Horizontal">
<StackPanel Name="BacklogPanel" Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.FullLeftBoxRegion}">
</StackPanel>
<StackPanel Orientation="Vertical">
<StackPanel Name="ToDoPanel" Style="{DynamicResource HalfLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.HalfTopBoxRegion}">
</StackPanel>
<StackPanel Name="MeetingPanel" Style="{DynamicResource HalfLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.HalfBottomBoxRegion}">
</StackPanel>
</StackPanel>
<StackPanel Name="SprintPanel" Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.FullSecondLeftBoxRegion}">
</StackPanel>
<StackPanel Name="StoriesPanel" Style="{DynamicResource FullLengthPanelStyle}"
prism:RegionManager.RegionName="{x:Static inf:RegionNames.FullRightBoxRegion}">
</StackPanel>
</StackPanel>
</Grid>
Don't forget to set TabItems Header text. You can do it in shered TabItemStyle
<Style TargetType="{x:Type TabItem}">
<Setter Property="Header" Value="{Binding Content.DataContext.TabHeaderText, RelativeSource={RelativeSource Self}}"/>
...
And after that easily add TabHeaderText property to your ViewModels for views displayed within TabControlRegion.
I want my items in listBox to stretch horizontally, but if item's content is bigger than listbox then horizontal scrollbar appears. How to avoid this?
Xaml:
<Window x:Class="WpfApplication6.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="testTemplate">
<Border x:Name="border"
BorderBrush="Black"
BorderThickness="1"
Margin="2"
Padding="2"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding}" />
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name="listBox"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource testTemplate}" />
</Grid>
</Window>
Set ScrollViewer.HorizontalScrollBarVisibility to Disabled:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
...
</ListBox>