[![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>
Related
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 :)
I need to make a list , example : List
I get datas from SQL, it's possible to scroll if there are more datas.
I need to create this list in WPF.
I need to click on label 00000-0 or label "A" or "F".
I try this :
<ListView x:Name="lvDataBinding" HorizontalContentAlignment="Stretch" BorderThickness="0" Margin="10" Grid.Row="3" Background="{x:Null}" ItemsSource="{Binding}" Foreground="White">
<ListView.ItemTemplate>
<DataTemplate DataType="{x:Type local:CL_Operation}">
<Border BorderBrush="White" BorderThickness="0" CornerRadius="3" Margin="0,3" Grid.ColumnSpan="4" Background="Transparent">
<Border.Effect>
<DropShadowEffect BlurRadius="5" ShadowDepth="5" />
</Border.Effect>
<Grid Background="Transparent" Margin="0,1">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Margin="50,5" >
<!-- <TextBlock Text="Customer" Foreground="#33B6EF" FontSize="20" />-->
<TextBlock Text="{Binding strPriorite}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1">
<!-- <TextBlock Text="Location" Foreground="#33B6EF" FontSize="20" />-->
<TextBlock Text="{Binding strRetardAvanceText}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<!-- <TextBlock Text="Created On" Foreground="#33B6EF" FontSize="20" />-->
<TextBlock Text="{Binding strNoOfOp}" FontSize="20" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="3">
<!-- <TextBlock Text="Quantity" Foreground="#33B6EF" FontSize="20" /> -->
<TextBlock Text="{Binding strDescriptionOp}" FontSize="20" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Window.Resources>
<DataTemplate DataType="{x:Type local:CL_Operation}" >
<Border BorderThickness = "1" BorderBrush = "Green" Margin = "2" Padding = "5" Width = "900" CornerRadius = "3" >
<Grid >
<Grid.ColumnDefinitions >
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions >
<TextBlock Grid.Column = "0" Text = "{Binding Path = strRetardAvanceText}" Background = "LightBlue" />
<!-- <TextBlock Grid.Column = "0" Text = "{Binding Path = strNoOfOp}" Background = "LightBlue" />-->
<TextBlock Grid.Column = "1" Text = "{Binding Path = strDescriptionOp}" Background = "LightBlue" />
<TextBlock Grid.Column = "2" Text = "{Binding Path = strNoArticle}" FontStyle = "Italic" />
</Grid >
</Border >
<DataTemplate.Triggers >
<DataTrigger Binding = "{Binding Path = strRetardAvanceText}" Value = "26 jrs" >
<Setter Property = "ListBoxItem.Foreground" Value = "Red" ></Setter >
</DataTrigger >
</DataTemplate.Triggers >
</DataTemplate >
</Window.Resources >
<Grid >
<ListBox x:Name = "listBox1" ItemsSource = "{Binding}" />
</Grid >
It's a good result but not on two columns, it's a lot of different
Thank you for your help.
I have a problem I can not solve.
As you can see in the picture , there is a label , a textobx and a ScrollViewer .
Now , I have to update the ScrollViewer when the user searches through the textbox .
Part of an event every time you make a keydown .
So if I write Statut ... should put first in the file list with the names "statuto rai"
the list can have N elements
Image list:
Xaml code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="GhostWhite"/>
<Grid Grid.Row="1" Background="Gray"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">Documenti allegati</TextBlock>
<Border Grid.Row="1" Margin="3" BorderBrush="White" Height="22" Background="#fff">
<TextBox BorderBrush="#465E76" KeyDown="TextBox_KeyDown" BorderThickness="0" FontSize="10" Background="#fff" Foreground="#565656" controls:TextBoxHelper.Watermark="Ricerca Locale" FontFamily="{StaticResource Lato Thin}" HorizontalContentAlignment="Center" ></TextBox>
</Border>
<ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Hidden" PanningMode="Both" Name="scrollDocuments">
<ItemsControl ItemsSource="{Binding Path=attachmentsList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Grid.Row="0">
<Button Grid.ColumnSpan="2">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="450"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#fff"></Grid>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="10,3,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding contList}"/>
<Image Source="/Resources/Images/icon-document-browser.png" HorizontalAlignment="Left" Margin="22,-12,0,0" Width="22"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10" Margin="21,32,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding FileSizeConverted}"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="12" Margin="55,-10,0,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding Name}"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="12" Margin="55,-10,10,0" Style="{DynamicResource Lato-Semibold}" Text="{Binding ModifiedDate}"/>
<TextBlock Foreground="#565656" FontFamily="{StaticResource Lato Semibold}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="10" Margin="55,25,10,0" FontWeight="Bold" Style="{DynamicResource Lato-Semibold}" Text="Nessuna copia locale"/>
<Border Grid.Row="0" Grid.ColumnSpan="2" BorderBrush="#DDD" BorderThickness="0,0,0,1"></Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<Viewbox Grid.Row="2" Name="testoNessunAllegato" Visibility="Collapsed" Margin="20">
<TextBlock Text="Nessun allegato disponibile."></TextBlock>
</Viewbox>
</Grid>
CodeBehind event code:
private void TextBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
string find = ((TextBox)sender).Text;
attachmentsList = attachmentsList.Where(x => x.Name == find).ToList();
InitializeComponent();
}
in practice I do the intelligiente research, so every time I insert a letter filtrale list , and print it again , of course real time .
I hope I explained myself .
Thank you
I see you use bindings, in this case there is a much better stuff to reach your goal. It's CollectionView.
Here is a simple app for you which more or less fullfill your requirements:
View
<StackPanel Orientation="Horizontal">
<Label Content="Search" />
<TextBox MinWidth="30" Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
<ListBox ItemsSource="{Binding Data}" />
UpdateSorceTrigger=PropertyChanges updates FilterText in ViewModel every time when you press any key.
Data is a ICollectionView
ViewModel
public ICollectionView Data { get; private set; }
...
// Create default view for the list
Data = CollectionViewSource.GetDefaultView(list);
// Set filter delegate for CollectionView
Data.Filter = FilterData;
....
private bool FilterData(object obj)
{
DataContainer cont = (DataContainer)obj;
return string.IsNullOrEmpty(FilterText) || cont.Name.StartsWith(FilterText, StringComparison.OrdinalIgnoreCase);
}
private string myfiltertext;
public string FilterText
{
get { return myfiltertext; }
set
{
myfiltertext = value;
// Refresh collection view after Filter text modification
Data.Refresh();
}
}
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;
}
}
I have a ListBox, an IEnumerable is the data source. When a ListBoxItem is clicked, I want access to that object so I can grab some data and show another window.
Here is my ListBox XAML
`<ListBox Name="listBox1" Margin="0" Width="1010" Height="275" BorderThickness="0" BorderBrush="{x:Null}" Cursor="Arrow" HorizontalAlignment="Center" VerticalAlignment="Top" SelectionMode="Single" FontFamily="DIN" ScrollViewer.HorizontalScrollBarVisibility="Hidden" Focusable="False" IsHitTestVisible="False" IsTextSearchEnabled="False" >`
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="ListBox_MouseLeftButtonDown"></EventSetter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type local:Offer}">
<StackPanel Margin="0" Width="200" Height="275" Background="Black" Name="sp">
<Image Source="{Binding Image}" Width="200" Height="131" Margin="0"></Image>
<TextBlock Padding="5" Background="Black" Text="{Binding Name}" Foreground="White" FontFamily="DIN medium" FontWeight="Bold" FontSize="16" Width="200" Margin="0"></TextBlock>
<TextBlock Padding="5,0,5,0" Background="Black" Text="{Binding Date}" Foreground="White" FontFamily="DIN medium" FontWeight="Bold" FontSize="14" Width="200" Margin="0"></TextBlock>
<TextBlock Padding="5" Background="Black" Text="{Binding Description}" Foreground="White" FontFamily="DIN light" FontSize="16" Width="200" Margin="0" TextWrapping="WrapWithOverflow"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Background="Black" CanHorizontallyScroll="True" CanVerticallyScroll="False" FlowDirection="LeftToRight" Margin="0" Orientation="Horizontal" Width="1010" Height="275"></VirtualizingStackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>`$
other pertinent info
CurrentItems = (from offerCatType in offerRes.OfferCategory
where offerCatType.type == Type
from offers in offerCatType.Offer
where new DateTime(Convert.ToDateTime(offers.startDate).Year,
Convert.ToDateTime(offers.startDate).Month, 1) <= MonthYear && Convert.ToDateTime(offers.endDate) >= MonthYear
select new Offer
{
Name = offers.name,
Description = offers.description,
Date = String.Format("{0:dd/MM/yyyy}", Convert.ToDateTime(offers.startDate)) + " to " + String.Format("{0:dd/MM/yyyy}", Convert.ToDateTime(offers.endDate)),
ClickThruUrl = offers.ChannelInfo.refClickThroughLink,
ReferenceID = offers.ChannelInfo.refId,
Image = offers.ChannelInfo.refLink
}
);
listBox1.ItemsSource = CurrentItems;
protected void ListBox_MouseLeftButtonDown(object sender, RoutedEventArgs e)
{}
Is it possible some of my styling could blow away this event? I had it working earlier today, then was fixing a couple more styling items, then, the click code stopped working.
Set the IsHitTestVisible property to true instead of false for the listbox and you will get mouse events.