i am trying to create an application that will display user controls, based on information collected from DB. The problem is that if items total height exceeds mainwindow grid reserved for this display, i do not see a vertical scrollbar. From what i had found there might be an issue, that stackpanel/scrollviewer does not limit size of it's children. Im stuck on how to solve this, is there any way to stack items in limited spaces with scrollbar visible only when needed.
I want to avoid "hardcoding" the height of scrollviewer.
For now i'm stuck with below code:
XAML: (main window)
<Grid Name="selectedOptionGrid"
Grid.Column="1"
Grid.Row="1"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<StackPanel Name="selectedOptionStack"/>
<!-- Dock selected windows based on option selected-->
</Grid>
(user control, additional window docked to mainwindow)
<UserControl x:Class="Power_Planner_1._0.Team_Planner.MyTasks.ucTaskWindow"
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:local="clr-namespace:Power_Planner_1._0.Team_Planner.MyTasks"
mc:Ignorable="d">
<Grid Background="White"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="5"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Orientation="Horizontal"
VerticalAlignment="Top"
Margin="0,5,0,0">
<TextBlock Margin="60,0,0,0" Width="160" FontWeight="Bold">Task Name</TextBlock>
<TextBlock Margin="10,0,0,0" Width="160" FontWeight="Bold">Team Name</TextBlock>
<TextBlock Margin="0,0,0,0" Width="55" FontWeight="Bold">Deadline</TextBlock>
<TextBlock Margin="20,0,0,0" Width="60" FontWeight="Bold">Start</TextBlock>
<TextBlock Margin="28,0,0,0" Width="60" FontWeight="Bold">End</TextBlock>
<TextBlock Margin="20,0,0,0" Width="60" FontWeight="Bold">Run Time</TextBlock>
</StackPanel>
<Separator Grid.Row="1"
VerticalAlignment="Top"/>
<Grid Name="taskListGrid"
Grid.Row="2"
Height="510"
Width="830">
<ScrollViewer VerticalScrollBarVisibility="Auto"
Width="{Binding ActualWidth,RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=Grid}}"
Height="{Binding ActualHeight,RelativeSource={RelativeSource
Mode=FindAncestor, AncestorType=Grid}}">
<StackPanel Orientation="Vertical"
x:Name="taskListStack">
<StackPanel.Resources>
<Style TargetType="UserControl">
<Setter Property="Margin" Value="0,5,0,0"/>
</Style>
</StackPanel.Resources>
</StackPanel>
</ScrollViewer>
</Grid>
</Grid>
</UserControl>
And finally an Items that are created:
<UserControl x:Class="Power_Planner_1._0.Team_Planner.MyTasks.ucTaskItem"
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:local="clr-namespace:Power_Planner_1._0.Team_Planner.MyTasks"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d" d:DesignHeight="45">
<Border CornerRadius="12,12,12,12"
BorderThickness="1,1,1,1"
BorderBrush="LightGray"
Background="#FF456780"
Padding="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="160"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="90"/>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--Picture-->
<Border Grid.Column="0"
CornerRadius="25,25,25,25"
BorderThickness="1,1,1,1"
Width="30"
Height="30"
BorderBrush="LightGray"
Background="ForestGreen"
HorizontalAlignment="Left"
Margin="10,0,0,0">
</Border>
<!--Task Name-->
<TextBlock Grid.Column="1"
Margin="10,0,0,0"
FontSize="12"
Foreground="LightGray"
Text="{Binding taskName}"
Width="160"
VerticalAlignment="Center">
</TextBlock>
<!--Team Name-->
<TextBlock Grid.Column="2"
Margin="20,0,0,0"
FontSize="12"
Foreground="LightGray"
Text="{Binding teamName}"
Width="160"
VerticalAlignment="Center">
</TextBlock>
<!--Deadline-->
<TextBlock Grid.Column="3"
Margin="20,0,0,0"
FontSize="12"
Foreground="LightGray"
Text="{Binding deadline}"
Width="45"
VerticalAlignment="Center">
</TextBlock>
<!--Start-->
<Button Grid.Column="4"
Background="#FF456780"
BorderBrush="LightGray"
Height="25"
Margin="20,0,0,0"
Width="60">
<Button.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</Button.Resources>
<TextBlock Foreground="LightGray">Start</TextBlock>
</Button>
<!--Stop-->
<Button Grid.Column="5"
Background="#FF456780"
BorderBrush="LightGray"
Height="25"
Margin="20,0,0,0"
Width="60">
<Button.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="10"/>
</Style>
</Button.Resources>
<TextBlock Foreground="LightGray">Stop</TextBlock>
</Button>
<!--Deadline-->
<TextBlock Grid.Column="6"
Margin="20,0,0,0"
FontSize="12"
Foreground="LightGray"
Text="{Binding runtime}"
Width="45"
VerticalAlignment="Center">
</TextBlock>
<!--Other Options-->
<materialDesign:PopupBox Grid.Column="7"
StaysOpen="False"
Foreground="White"
HorizontalAlignment="Right">
<StackPanel Width="150"
Background="White">
<Button Content="Edit"/>
<Button Content="View Details"/>
<Button Content="Comment"/>
</StackPanel>
</materialDesign:PopupBox>
</Grid>
</Border>
</UserControl>
Code to add items:
taskListStack.Children.Clear();
var task1 = new clsTaskItem("Test1", "blablabla", "12:40", "02:30");
taskListStack.Children.Add(new ucTaskItem(task1));
var task2 = new clsTaskItem("Test2", "blablabla", "13:45");
taskListStack.Children.Add(new ucTaskItem(task2));
var task3 = new clsTaskItem("Test3", "blablabla", "11:45");
taskListStack.Children.Add(new ucTaskItem(task3));
var task4 = new clsTaskItem("Test4", "blablabla", "14:45");
taskListStack.Children.Add(new ucTaskItem(task4));
var task5 = new clsTaskItem("Test5", "blablabla", "17:45");
taskListStack.Children.Add(new ucTaskItem(task5));
var task6 = new clsTaskItem("Test6", "blablabla", "18:45");
taskListStack.Children.Add(new ucTaskItem(task6));
var task7 = new clsTaskItem("Test7", "blablabla", "13:23");
taskListStack.Children.Add(new ucTaskItem(task7));
var task8 = new clsTaskItem("Test8", "blablabla", "12:54");
taskListStack.Children.Add(new ucTaskItem(task8));
var task9 = new clsTaskItem("Test9", "blablabla", "17:23");
taskListStack.Children.Add(new ucTaskItem(task9));
var task10 = new clsTaskItem("Test10", "blablabla", "17:10");
taskListStack.Children.Add(new ucTaskItem(task10));
taskListStack.Children.Add(new ucTaskItem(task1));
taskListStack.Children.Add(new ucTaskItem(task2));
taskListStack.Children.Add(new ucTaskItem(task3));
taskListStack.Children.Add(new ucTaskItem(task4));
taskListStack.Children.Add(new ucTaskItem(task5));
taskListStack.Children.Add(new ucTaskItem(task6));
taskListStack.Children.Add(new ucTaskItem(task7));
taskListStack.Children.Add(new ucTaskItem(task8));
taskListStack.Children.Add(new ucTaskItem(task9));
taskListStack.Children.Add(new ucTaskItem(task10));
And task item class ( to which items are binded via datacontext)
public class clsTaskItem
{
public clsTaskItem(string tsname, string tmname, string dline, string rtime = "00:00:00")
{
taskName = tsname;
teamName = tmname;
deadline = dline;
runtime = rtime;
}
public string taskName { get; private set; }
public string teamName { get; private set; }
public string deadline { get; private set; }
public string runtime { get; private set; }
}
As you can see i had tried to bind the scrollviewer height to grid i had created on top of it, thinking that if i set height to auto, it will get the height from the grid actual height. Well that didn't make much sense hence it was not working. I'm trying to find another solution for grouping the items, that way that i could expand easily main window, without coding each window to expand with this expansion so that items would both fill all available space and display scrollbar when needed.
Please help :)
Related
I have viewlist in which contain elements. When I click on them, my ItemViewModel handler clicks. Then I can select information about that element. Afthe I must to open new page in which will be all information about it. For example like hypertext in browser.
<Border MaxHeight="300" MaxWidth="1140" CornerRadius="25" Margin="73,269,65,182">
<Grid x:Name="MainGrid" RenderTransformOrigin="0.5,0.5" Margin="0,0,10,-3">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListView Width="1031" ItemsSource="{Binding GetTopItem}"
ScrollViewer.VerticalScrollBarVisibility="Disabled" HorizontalAlignment="Left" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#DD000000"
x:Name="ListBook">
<ListView.DataContext>
<vm:BookMainVM/>
</ListView.DataContext>
<ListView.ItemTemplate>
<DataTemplate>
<Border HorizontalAlignment="Left" CornerRadius="25,25,25,25" BorderThickness="1" BorderBrush="#FF474747" Height="288" Margin="0,0,0,0" MouseDown="Border_MouseDown" >
<Grid Grid.Column="0" Height="Auto" Width="216" Margin="-1" IsEnabled="False">
<Grid.InputBindings>
<MouseBinding Gesture="LeftClick"
Command="{Binding DataContext.DelegateCommands,
RelativeSource={RelativeSource AncestorType=ListView}}"
CommandParameter="{Binding}">
</MouseBinding>
</Grid.InputBindings>
<Grid.RowDefinitions>
<RowDefinition Height="49*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<Border CornerRadius="25,25,0,0" RenderTransformOrigin="0.5,0.5">
<Border.Background>
<ImageBrush ImageSource="{Binding Img_src}" Stretch="Fill" />
</Border.Background>
</Border>
<Label Content="{Binding Rate}" Background="#FFBFBFBF" RenderTransformOrigin="0.5,0.5" Grid.Row="1" FontSize="11" FontFamily="Meiryo UI" HorizontalContentAlignment="Center"/>
<Border CornerRadius="0,0,25,25" Grid.Row="2" Background="#FF8F8F8F">
<TextBlock Margin="6,0,0,0" Text="{Binding Name}" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Grid.Row="2" Height="61" Width="190"/>
</Border>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Border>
class ItemMainVM:ViewModel
{
private LibraryModel libraryModel;
private ItemDb itemsDb;
private const string Dir = "D:\\repos\\Frame\\Frame\\src";
public ItemMainVM()
{
libraryModel = new LibraryModel();
itemsDb = new BooksDb();
DelegateCommands = new DelegateCommand(o => EventHandler(o));
}
public ObservableCollection<BookPreviewInfo> GetTopItem
{
get
{
return libraryModel.GetTopItems();
}
}
public ICommand DelegateCommands { get; }
public void EventHandler(dynamic item)
{
itemDb.SelectItemId(item.Id);
}
}
Code Behind is empty.
When I click an element and executing EventHandler in ItemMainVM. And next must be create new page with new ElementViewModel.
ElementViewModel should to get information about element in ItemMainVM.
I've created a XAML UWP Listview
<ListView x:Name="ThisList"
Grid.Row="3"
Grid.ColumnSpan="7"
Background="LightBlue"
IsItemClickEnabled="True"
BorderBrush="Black"
BorderThickness="2"
ItemClick="ThisList_ItemClick">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid BorderThickness="1" BorderBrush="Black">
<Grid.Resources>
<local:ColourConverter x:Key="CCX"/>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="10*" MinWidth="500"/>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Border Background="Aquamarine" Grid.Column="0">
<SymbolIcon Symbol="{Binding Icon}" HorizontalAlignment="Center" Margin="10"/>
</Border>
<Border Background="Yellow" Grid.Column="1">
<TextBlock Name="tbFileName" Text="{Binding FName}" VerticalAlignment="Center" Margin="5" />
</Border>
<Border Background="Cyan" Grid.Column="2">
<!--<TextBlock Text="{Binding FTime}" VerticalAlignment="Center" Margin="5" />-->
<TextBlock Text="{Binding FTime}"
Name="FileTime"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Foreground="{Binding ElementName=FileTime,
Path=Text,
Mode=OneWay,
Converter={StaticResource CCX}}"/>
</Border>
<Border Background="Tomato" Grid.Column="3">
<TextBlock Text="{Binding FSize}" HorizontalAlignment="Right" Margin="10" />
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The code behind is
var folderItem = new ObservableCollection<FolderInfo>();
foreach (StorageFolder folder in folderList)
{
BasicProperties pro = await folder.GetBasicPropertiesAsync();
folderItem.Add(new FolderInfo()
{
FName = folder.DisplayName,
FSize = "",
FTime = lastFileSave,
FIsFolder = true
});
}
foreach (StorageFile file in fileList)
{
BasicProperties pro = await file.GetBasicPropertiesAsync();
lastFileSave = file.DateCreated.ToString(Globals.TimeFormat);
folderItem.Add(new FolderInfo()
{
//FName = file.DisplayName,
FName = file.Name,
FSize = GetFileSize(pro.Size),
FTime = lastFileSave,
FIsFolder = false,
Icon="Document"
});
}
showLoadingBox(false);
FileInfo.Text += $"Last file saved : {lastFileSave}";
ThisList.ItemsSource = folderItem;
So my question is that I'd like to create a header row that I can click on the title and it re-sorts the ListView by that column, and if I click again it re-sorts descending.
What is the best way to achieve this?
Ok so there was no rush of answers so I have created a separate grid to make the header, and added a tapped event to requery the data source, but to do a query on it as it is assigned to the listview source as follows.
ThisList.ItemsSource = (from FolderInfo in folderItem
orderby FolderInfo.RealDateTime
select FolderInfo);
It's probably not the most efficient way of doing things, but currently the only way I can see of doing it without the ListView having some kind of sort method available.
Would appreciate any comments if there is a better way of doing it.
I'm trying to to show a grouped Listview based on this class
private class EInfo
{
public double JD { get; set; }
public string Date { get; set; }
public string Time { get; set; }
public string Details { get; set; }
public string MoreDetails { get; set; }
public string Icon { get; set; }
}
private List<EInfo> MEphemeries = new List<EInfo>();
This is how I grouped and ordered all the elements in every group:
IEnumerable<IGrouping<string, EInfo>> query = MEphemeries.GroupBy(pet => pet.Details);
foreach (var group in query)
{
Debug.WriteLine("Group {0}", group.Key);
group.OrderBy(a => a.JD);
foreach (var user in group)
{
Debug.WriteLine(" {0}", user.Date);
}
}
listviewME.ItemsSource = query;
And here goes the XAML:
<SemanticZoom Grid.Row="1" Background="Black" x:Name="semanticZoom" >
<SemanticZoom.ZoomedInView>
<ListView x:Name="listviewME" IncrementalLoadingThreshold="15">
<!--<ListView.SemanticZoomOwner>
<SemanticZoom/>
</ListView.SemanticZoomOwner>-->
<ListView.Header>
<!-- table header-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="listviewMEHeader0" Width="140"/>
<ColumnDefinition x:Name="listviewMEHeader1" Width="60"/>
<ColumnDefinition x:Name="listviewMEHeader2" Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">
</Grid>
<Grid Grid.Column="1" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">
</Grid>
<Grid Grid.Column="2" Background="{StaticResource MediumGreyThemeColor}" Margin="0, 0.5, 0, 0.5">
</Grid>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Background="Black" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5">
<StackPanel>
<TextBlock Text="{Binding Date}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}"/>
<TextBlock Text="{Binding Time}" Margin="5,0,5,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" FontSize="14" Foreground="{StaticResource LightGreyThemeColor}"/>
</StackPanel>
</Grid>
<Grid Grid.Column="1" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5">
<!--<Rectangle Height="25" Width="25" Margin="0" Fill="{StaticResource MoonThemeColor}" RadiusX="12.5" RadiusY="12.5" />
<Rectangle Height="35" Width="35" Margin="0" Stroke="{Binding Color}" StrokeThickness="2" RadiusX="17.5" RadiusY="17.75" />-->
<Image Height="30" Width="30" Margin="0" Source="{Binding Icon}" Stretch="Uniform" />
</Grid>
<Grid Grid.Column="2" Background="{StaticResource DarkGreyThemeColor}" Margin="0, 0, 0, 0.5" Width="{Binding ActualWidth, ElementName=listviewMEHeader2}">
<StackPanel>
<TextBlock Text="{Binding Details}" Margin="5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource FlyoutPickerTitleTextBlockStyle}" Foreground="{StaticResource VeryLightGreyThemeColor}"/>
<TextBlock Text="{Binding MoreDetails}" Margin="5,0,5,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" FontSize="14" Foreground="{StaticResource LightGreyThemeColor}"/>
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Grid.Column="0" Grid.ColumnSpan="3" MinWidth="400" BorderThickness="2" BorderBrush="Blue" Background="AliceBlue" Margin="0,10,5,0" CornerRadius="1">
<TextBlock Foreground="White" Text="{Binding Key}"
Margin="10,2,2,5" TextTrimming="WordEllipsis" TextWrapping="NoWrap"
FontWeight="SemiBold" FontSize="10" />
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<ListView Margin="5" ItemsSource="{Binding query}" Background="White">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="99" Margin="16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Background="{StaticResource MediumDarkGreyThemeColor}" Width="200" Height="111">
<Grid>
<TextBlock Text="{Binding Group.Key}" Style="{ThemeResource SubheaderTextBlockStyle}" />
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
The question is that all the info is grouped Ok, every group with its key, its list of elements correctly ordered by date, but the listview doesn't shows any info. It only some empty blocks (the number of block is the same to the number of groups).
What is the problem? How I can fix this?
This is what I get:
This is what I want to achieve:
Thank you in advance!
Some stuff I see that might fix your problems:
1) Change your private class EInfo to public
2) Your first ListView does not have ItemsSource set while your second LiewView has it set to ItemsSource="{Binding query}"
3) You can group your ListView and GridView nicely by using a CollectionViewSource see here : CollectionViewSource example
4) Or you can do it manually by Grouping it into an AlphaKeyGroup, I have a working example here : AlphaKeyGroup
Last idea, is to check the output of your GroupBy code vs the CollectionViewSource and AlphaKeyGroup in the debugger to see if they match up.
[![enter image description here][1]][1]I have problem with panel size in ListView. I have StackPanel in GridView and after rotation i want resize this gridview to the whole page, but after rotate stackPanel had the same widht as he had in portrait mode. Here is my code.
But when I start application on Landscape mode it is all ok and grid is resized.
<Page
x:Class="KlientWP.VypisZakazek"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:KlientWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Loaded="Page_Loaded" SizeChanged="Page_SizeChanged">
<Page.Background>
<SolidColorBrush Color="{ThemeResource PhoneImagePlaceholderColor}"/>
</Page.Background>
<Grid x:Name="ContentRoot" Margin="0,9.5,0,0">
<ScrollViewer>
<Pivot Title="Přehled databáze" HorizontalAlignment="Stretch" Margin="0,0,0,0">
<PivotItem Header="Zakázky" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,0,20,10" >
<ListView SelectionMode="None" x:Name="ListBox1" Margin="0,0,-0.167,0.167"
HorizontalAlignment="Stretch"
ItemsSource="{Binding}" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grdTsk" Opacity="1" Margin="0,0,0,10" Width="1500" HorizontalAlignment="Stretch" Background="#FF302E2E" ManipulationMode="All" Tapped="grdTsk_Tapped" >
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<FlyoutBase.AttachedFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Detail zakázky" Click="Detail" />
</MenuFlyout>
</FlyoutBase.AttachedFlyout>
<TextBlock Grid.Row="1" Text="{Binding nazev1}" Width="1500" FontSize="22" TextWrapping="Wrap" HorizontalAlignment="Stretch" Margin="5,0,0,0" Visibility="Visible" FontWeight="Light" Foreground="White"/>
<!--<StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" Margin="0,0,0,0" >
<TextBlock Text="{Binding nazev}" FontSize="22" TextWrapping="Wrap" Margin="5,0,0,0" Visibility="Visible" FontWeight="Light" Foreground="White"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,0,0">
<TextBlock x:Name="predmetTb" Text="{Binding zakazka}" FontSize="18" Margin="5,0,0,0" TextWrapping="Wrap" />
<TextBlock Text="{Binding kod_firmy}" FontSize="18" TextWrapping="Wrap" Margin="15,0,0,0" Foreground="#FFFFF413" />
</StackPanel>
</StackPanel>-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</PivotItem>
</Pivot>
</ScrollViewer>
</Grid>
binding:
CultureInfo culture = new CultureInfo("cs-CZ");
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(List<dataInfo>));
MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(json));
var obj = (List<dataInfo>)ser.ReadObject(stream);
List<dataInfo> VypisZakazekli = new List<dataInfo>();
VypisZakazekli.Clear();
foreach (dataInfo di in obj)
{
string iZakazka = "ID: " + di.zakazka;
string sNazev = di.nazev;
string sKod = "Firma: " + di.kod_firmy;
string sStatus = "Status: " + di.status_v;
string sDruh = di.druh_zakazky;
VypisZakazekli.Add(new dataInfo(iZakazka, sNazev, sKod, sStatus, sDruh));
}
this.ListBox1.ItemsSource = VypisZakazekli;
}
Try to add this to your listview :
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
I am trying to create a flipview on the an ItemDetailpage. I am using the default template provided in visual studio when creating a grid app.
Pages in the App: GroupItemsPage, GroupDetailPage, ItemDetailPage
The problem is, I am getting this error when I click on an item on the GroupItemsPage or GroupDetailPage:
Object reference not set to an instance of an object.
Error details:
System.NullReferenceException was unhandled by user code
HResult=-2147467261
Message=Object reference not set to an instance of an object.
Source=AppError
StackTrace: at AppError.ItemDetailPage.<navigationHelper_LoadState>d__0.MoveNext()
This is my code:
GroupItemsPage.xaml
<Page
x:Name="pageRoot"
x:Class="AppError.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppError"
xmlns:data="using:AppError.Data"
xmlns:common="using:AppError.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<x:String x:Key="ChevronGlyph"></x:String>
<!--
Collection of grouped items displayed by this page, bound to a subset
of the complete item list because items in groups cannot be virtualized
-->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="Items"
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextBlockButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
GroupItemsPage.xaml.cs
namespace AppError
{
public sealed partial class GroupedItemsPage : Page
{
private NavigationHelper navigationHelper;
private ObservableDictionary defaultViewModel = new ObservableDictionary();
public NavigationHelper NavigationHelper
{
get { return this.navigationHelper; }
}
public ObservableDictionary DefaultViewModel
{
get { return this.defaultViewModel; }
}
public GroupedItemsPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
}
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var sampleDataGroups = await SampleDataSource.GetGroupsAsync();
this.DefaultViewModel["Groups"] = sampleDataGroups;
}
void Header_Click(object sender, RoutedEventArgs e)
{
// Determine what group the Button instance represents
var group = (sender as FrameworkElement).DataContext;
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
this.Frame.Navigate(typeof(GroupDetailPage), ((SampleDataGroup)group).UniqueId);
}
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}
}
GroupDetailpage.xaml
<Page
x:Name="pageRoot"
x:Class="AppError.GroupDetailPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppError"
xmlns:data="using:AppError.Data"
xmlns:common="using:AppError.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- Collection of items displayed by this page -->
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Items}"
d:Source="{Binding Groups[0].Items, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Group}"
d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Grid.RowSpan="2"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<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 ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Header>
<StackPanel Width="480" Margin="0,4,14,0">
<TextBlock Text="{Binding Subtitle}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding ImagePath}" Height="400" Margin="0,0,0,20" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<TextBlock Text="{Binding Description}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</StackPanel>
</GridView.Header>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
GroupDetailPage.xaml.cs
namespace AppError
{
public sealed partial class GroupDetailPage : Page
{
private NavigationHelper navigationHelper;
private ObservableDictionary defaultViewModel = new ObservableDictionary();
public NavigationHelper NavigationHelper
{
get { return this.navigationHelper; }
}
public ObservableDictionary DefaultViewModel
{
get { return this.defaultViewModel; }
}
public GroupDetailPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
}
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var group = await SampleDataSource.GetGroupAsync((String)e.NavigationParameter);
this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Items"] = group.Items;
}
void ItemView_ItemClick(object sender, ItemClickEventArgs e)
{
// Navigate to the appropriate destination page, configuring the new page
// by passing required information as a navigation parameter
var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;
this.Frame.Navigate(typeof(ItemDetailPage), itemId);
}
}
ItemDetailPage.xaml
<Page
x:Name="pageRoot"
x:Class="AppError.ItemDetailPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppError"
xmlns:data="using:AppError.Data"
xmlns:common="using:AppError.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="itemViewSource"
Source="{Binding Items}"
d:Source="{Binding Groups[0].Items, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Item}"
d:DataContext="{Binding Groups[0].Items[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--
TODO: Content should be placed within the following grid
to show details for the current item
-->
<FlipView
Grid.Row="1"
x:Name="flipView"
Margin="50,0,0,0"
ItemsSource="{Binding Source={StaticResource itemViewSource}}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Border>
<Image Source="{Binding ImagePath}"/>
</Border>
<TextBlock Text="{Binding Description}" Padding="0,30,0,0" TextWrapping="Wrap"/>
</StackPanel>
<Grid Grid.Column="1" Margin="30,0,0,0">
<TextBlock Text="{Binding Content}" TextWrapping="Wrap"/>
</Grid>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
ItemDetailPage.xaml.cs
namespace AppError
{
public sealed partial class ItemDetailPage : Page
{
private NavigationHelper navigationHelper;
private ObservableDictionary defaultViewModel = new ObservableDictionary();
public NavigationHelper NavigationHelper
{
get { return this.navigationHelper; }
}
public ObservableDictionary DefaultViewModel
{
get { return this.defaultViewModel; }
}
public ItemDetailPage()
{
this.InitializeComponent();
this.navigationHelper = new NavigationHelper(this);
this.navigationHelper.LoadState += navigationHelper_LoadState;
}
private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
// TODO: Create an appropriate data model for your problem domain to replace the sample data
var group = await SampleDataSource.GetGroupAsync((String)e.NavigationParameter);
var item = await SampleDataSource.GetItemAsync((String)e.NavigationParameter);
this.DefaultViewModel["Group"] = group;
this.DefaultViewModel["Items"] = group.Items;
this.flipView.SelectedItem = item;
}
}