Related
I have just started to learn the MVVM methodolgy. I have written a simple application that basically is a application form. My UserControl window is a bunch of labels and textboxes. I bind the textboxes to elements in an Application class. The user can either choose to load the data from a Google spreadsheet or hard code the data. This all works great. I also want to be able to print the form with the values in the textboxes. The window layout prints just fine but the value in the textboxes. I am just doing a printobjext.printvisual command. My question is how do I print the contents of the textboxes, do I need to bind the data in some other way?
Here is part of my UserControl XAML window. just eliminating redundent code.
<UserControl x:Class="ApplicationForm.Views.ApplicationView"
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:ApplicationForm"
xmlns:model="clr-namespace:ApplicationForm.Model"
xmlns:views="clr-namespace:ApplicationForm.Views"
xmlns:viewModel="clr-namespace:ApplicationForm.ViewModel"
mc:Ignorable="d"
Height="980" Width="800" Background="#FFDAFDF2">
<!--<UserControl.Resources>
<ResourceDictionary>
<viewModel:ApplicationViewModel x:Key="AppViewModel"/>
</ResourceDictionary>
</UserControl.Resources>-->
<Grid x:Name="grdAppForm">
<Grid x:Name="grdAppFormGrid" DocumentViewerBase.IsMasterPage="True" VirtualizingPanel.VirtualizationMode="Standard"
VirtualizingPanel.IsVirtualizingWhenGrouping="True" HorizontalAlignment="Center" VerticalAlignment="Center" Height="820" Width="700">
<Label x:Name="lblName" Content="Name:" Height="28" Width="58" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,10,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="16" />
<TextBox x:Name="tbxName" DataContext="{Binding Applicants, Mode=TwoWay}" Text="{Binding FullName, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, BindsDirectlyToSource=True}"
Height="22" Width="215" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="83,10,0,0" FontFamily="Arial" FontWeight="Bold" BorderThickness="0,0,0,3" BorderBrush="Black" FontSize="16" VerticalContentAlignment="Bottom"/>
<Label x:Name="lblFamilySize" Content="Family Size:" Height="28" Width="102" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="362,10,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="16" />
<Label x:Name="lblFamO" Content="O:" Height="28" Width="27" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="461,10,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="16"/>
<TextBox x:Name="txbFamO" DataContext="{Binding Applicants, Mode=TwoWay}" Text="{Binding Path=FamilyO, Mode=TwoWay, BindsDirectlyToSource=True}" Height="22" Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="486,10,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold" BorderThickness="0,0,0,3" BorderBrush="Black" VerticalContentAlignment="Bottom"/>
<Label x:Name="lblFamA" Content="A:" Height="28" Width="25" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="506,10,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="16"/>
<TextBox x:Name="tbxFamA" DataContext="{Binding Applicants}" Text="{Binding Path=FamilyA, Mode=TwoWay}" Height="22" Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="531,10,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold" BorderThickness="0,0,0,3" BorderBrush="Black" VerticalContentAlignment="Bottom"/>
<Label x:Name="lblFamC" Content="C:" Height="28" Width="25" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="552,10,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="16"/>
<TextBox x:Name="txtFamC" DataContext="{Binding Applicants}" Text="{Binding Path=FamilyC, Mode=TwoWay}" Height="22" Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="577,10,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold" BorderThickness="0,0,0,3" BorderBrush="Black" VerticalContentAlignment="Bottom"/>
<Label x:Name="lblEqual" Content="=" Height="28" Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="601,10,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="16"/>
<TextBox x:Name="tbxFamTot" DataContext="{Binding Applicants}" Text="{Binding Path=FamilyTotal,
Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="True" Height="22" Width="30"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="624,10,0,0" FontFamily="Arial"
FontWeight="Bold" FontSize="16" BorderBrush="Black" BorderThickness="0,0,0,3" IsTabStop="False" VerticalContentAlignment="Bottom"/>
<Label x:Name="lblRenewalDate" Content="Renewal Date:" Height="28" Width="119" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="127,60,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold"/>
<TextBox x:Name="tbxRenewalDate" DataContext="{Binding Applicants}" Text="{Binding Path=RenewalDate, Mode=TwoWay}" Height="22" Width="180" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="247,60,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold" BorderThickness="0,0,0,3" BorderBrush="Black" VerticalContentAlignment="Bottom"/>
<Label x:Name="lblAddressDisp" Content="Address:" Height="28" Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="80,115,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold"/>
<TextBox x:Name="tbxAddress1" DataContext="{Binding Applicants, Mode=TwoWay}" Text="{Binding Path=Address1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, BindsDirectlyToSource=True}" Height="22" Width="344" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="162,115,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold" TextWrapping="Wrap" BorderThickness="0,0,0,3" BorderBrush="Black" VerticalContentAlignment="Bottom"/>
<TextBox x:Name="tbxAddress2" DataContext="{Binding Applicants}" Text="{Binding Path=Address2, Mode=TwoWay}" Height="22" Width="426" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="80,145,0,0" FontFamily="Arial" FontSize="16" FontWeight="Bold" TextWrapping="Wrap" BorderThickness="0,0,0,3" BorderBrush="Black" VerticalContentAlignment="Bottom"/>
</grid>
<Grid x:Name="grdButtonsGrid" HorizontalAlignment="Center" Height="80" Width="700" Margin="20, 880,0,0">
<Button x:Name="btnLoadApplicant" Command="{Binding LoadApplicantCommand}"
HorizontalAlignment="Left" Height="43" Margin="60,25,0,0" VerticalAlignment="Top"
Width="78" FontFamily="Arial" FontSize="14.667" Background="#FFDAFDF2" BorderThickness="2">
<TextBlock Text="Load Applicant" TextWrapping="Wrap" />
</Button>
<Button x:Name="btnGetApplicant" Command="{Binding GetApplicantCommand}"
HorizontalAlignment="Left" Height="43" Margin="150,25,0,0" VerticalAlignment="Top"
Width="95" FontFamily="Arial" FontSize="14.667" Background="#FFDAFDF2" BorderThickness="2">
<TextBlock Text="Get Applicant By Name" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="WrapWithOverflow" />
</Button>
<Button x:Name="btnPrintApplicant" Command="{Binding PrintApplicantCommand}"
HorizontalAlignment="Left" Height="43" Margin="255,25,0,0" VerticalAlignment="Top"
Width="70" FontFamily="Arial" FontSize="14.667" Background="#FFDAFDF2" BorderThickness="2">
<TextBlock Text="Print Applicant" TextWrapping="Wrap"/>
</Button>
<Button x:Name="btnClearData" Command="{Binding ClearDataCommand}"
HorizontalAlignment="Left" Height="43" Margin="335,25,0,0" VerticalAlignment="Top"
Width="58" FontFamily="Arial" FontSize="14.667" Background="#FFDAFDF2" BorderThickness="2">
<TextBlock Text="Clear Data" TextWrapping="Wrap"/>
</Button>
<Button x:Name="btnClose" Content="Close" Command="{Binding CloseCommand}"
HorizontalAlignment="Left" Height="43" Margin="440,25,0,0" VerticalAlignment="Top"
Width="58" FontFamily="Arial" FontSize="14.667" Background="#FFDAFDF2" BorderThickness="2">
</Button>
</Grid>
</grid>
Here is part of my Application class in my ApplicationModel.
namespace ApplicationForm.Model
{
public class ApplicationModel
{
}
public class Applicant : INotifyPropertyChanged
{
private string firstName;
private string lastName;
private string familyO;
private string familyA;
private string familyC;
private string renewalDate;
private string address1;
private string address2;
private string city;
private string state;
private string zip;
private string phoneNumber;
private string name1Birthday;
private string name2;
private string name2Birthday;
private string name3;
private string name3Birthday;
private string name4;
private string name4Birthday;
private string name5;
private string name5Birthday;
private string name6;
private string name6Birthday;
private string name7;
private string name7Birthday;
private string name8;
private string name8Birthday;
public string FirstName
{
get
{
return firstName;
}
set
{
if (firstName != value)
{
firstName = value;
RaisePropertyChanged("FirstName");
RaisePropertyChanged("FullName");
}
}
}
public string LastName
{
get { return lastName; }
set
{
if (lastName != value)
{
lastName = value;
RaisePropertyChanged("LastName");
RaisePropertyChanged("FullName");
}
}
}
public string FullName
{
get
{
return firstName + " " + lastName;
}
}
public string FamilyO
{
get { return familyO; }
set
{
if (familyO != value)
{
familyO = value;
RaisePropertyChanged("FamilyO");
}
}
}
public string FamilyA
{
get { return familyA; }
set
{
if (familyA != value)
{
familyA = value;
RaisePropertyChanged("FamilyA");
}
}
}
}
}
And here is my print routine in ApplicationViewModel.
public void PrintApplicant(object selectedItem)
{
ApplicationView view = new ApplicationView();
PrintDialog prnt = new PrintDialog();
ObservableCollection<Applicant> applicants = new ObservableCollection<Applicant>();
applicants = Applicants;
if (prnt.ShowDialog() == true)
{
Size pageSize = new Size(prnt.PrintableAreaWidth - 30, prnt.PrintableAreaHeight - 30);
view.grdAppFormGrid.Measure(pageSize);
view.grdAppFormGrid.Arrange(new Rect(5, 5, pageSize.Width, pageSize.Height));
prnt.PrintVisual(view.grdAppFormGrid, applicants[0].FullName);
}
}
I have listview with binding:
<ListView x:Name="OrdersListView" IsItemClickEnabled="True" SelectionMode="Single"
ItemClick="OrdersListView_ItemClick" SelectedItem="{Binding AllRoundsSelectedItem, Mode=TwoWay}">
I need to click element and receive data.
I do it like this.
public RootObject allRoundsSelectedItem;
public RootObject AllRoundsSelectedItem
{
get { return allRoundsSelectedItem; }
set { allRoundsSelectedItem = value; OnPropertyChanged();}
}
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private void OrdersListView_ItemClick(object sender, ItemClickEventArgs e)
{
}
When i set breakpoint on this row set { allRoundsSelectedItem = value; OnPropertyChanged();}
I see that I have value that I need to have.
I try to enter data in another ListView.
Here code for it:
<ScrollViewer HorizontalAlignment="Left" Height="667" Margin="415,54,-124,-1" VerticalAlignment="Top" Width="989">
<ListView x:Name="DetailsListView" ItemsSource="{Binding AllRoundsSelectedItem}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Height="667" Width="989">
<Grid x:Name="DetailGrid" Height="667" Width="989" VerticalAlignment="Top" >
<Grid HorizontalAlignment="Left" Height="44" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock1" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Время и дата заказа" VerticalAlignment="Top" Height="44" Width="214" FontSize="23"/>
<TextBlock x:Name="textBlock2" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding date_created}" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,44,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock3" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Статус" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock4" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding status }" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,88,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock5" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Осталось времени" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock6" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,132,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock7" HorizontalAlignment="Left" TextWrapping="Wrap" Text="На когда" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock8" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding billing.city}" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,176,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock9" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Сумма" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock10" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding total}" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,220,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock11" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Имя" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock12" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,264,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock13" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Телефон" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock14" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding billing.phone}" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,308,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock15" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Адрес" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock16" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,352,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock17" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Количество персон" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock18" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="{Binding billing.postcode}" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,396,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock19" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Откуда" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock20" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,440,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock21" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Состав заказа" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock22" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,484,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock23" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Приметка для кухни" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock24" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
<Grid HorizontalAlignment="Left" Height="44" Margin="0,528,0,0" VerticalAlignment="Top" Width="989" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock x:Name="textBlock25" HorizontalAlignment="Left" TextWrapping="Wrap" Text="Приметка для курьера" VerticalAlignment="Top" Height="44" Width="360" FontSize="23"/>
<TextBlock x:Name="textBlock26" HorizontalAlignment="Left" Margin="500,0,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Height="44" Width="360"/>
</Grid>
</Grid>
</StackPanel></DataTemplate></ListView.ItemTemplate></ListView>
But anything shows.
Where is my trouble?
Thank's for help so much!
Your question wasn't very clear, so I can only guess as to what you were trying to achieve. It looks as though you want some kind of master-detail interface, wherein you choose an item from the list (master) and then another form displays with controls for editing the data for that item (detail).
Your first ListView looks fine (and the binding works as you said). But why are you using another ListView for displaying the details of the selected item? ListViews are for displaying lists of data, but it appears that RootObject is not an array or collection class (I could be wrong, I don't know the class definition). You probably shouldn't be using a ListView, but whatever you use, you should bind the AllRoundsSelectedItem to the DataSource property of the panel.
Solution 1: I mostly agree with #Decade Moon, but for the last line, there is no DataSource property of the StackPanel you used, I think this maybe is a typo, it should be DataContext. Anyway, here I'm writing this answer to give a demo for this solution:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListView x:Name="OrdersListView" IsItemClickEnabled="True" SelectionMode="Single"
ItemClick="OrdersListView_ItemClick" SelectedItem="{Binding AllRoundsSelectedItem, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ItemName}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ScrollViewer Grid.Column="1">
<StackPanel x:Name="Detail" Grid.Column="1" >
<TextBlock Text="{Binding ItemName}" FontSize="30" Foreground="Red" />
<TextBlock Text="{Binding Paramether1}" Margin="0,15" FontSize="20" />
<TextBlock Text="{Binding Paramether2}" FontSize="20" />
<TextBlock Text="{Binding Paramether3}" Margin="0,15" FontSize="20" />
<TextBlock Text="{Binding Paramether4}" FontSize="20" />
<TextBlock Text="{Binding Paramether5}" Margin="0,15" FontSize="20" />
</StackPanel>
</ScrollViewer>
</Grid>
If your layout is like this, then you can keep your most of the code in behind and in the OrdersListView_ItemClick event code like this:
private void OrdersListView_ItemClick(object sender, ItemClickEventArgs e)
{
AllRoundsSelectedItem = e.ClickedItem as RootObject;
Detail.DataContext = AllRoundsSelectedItem;
}
Solution 2: if you still want to use a ListView to show the details so can they be selected or something else, you can for example code like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListView x:Name="OrdersListView" IsItemClickEnabled="True" SelectionMode="Single"
ItemClick="OrdersListView_ItemClick" SelectedItem="{Binding AllRoundsSelectedItem, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ItemName}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView x:Name="DetailsListView" ItemsSource="{Binding AllRoundsSelectedItem}" Grid.Column="1">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding}" FontSize="20" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
And the type of AllRoundsSelectedItem should be List or OberservableCollection, it means you need to modify your code behind for example like this:
public sealed partial class MainPage : Page, INotifyPropertyChanged
{
public MainPage ()
{
this.InitializeComponent();
this.DataContext = this;
}
private ObservableCollection<RootObject> collection = new ObservableCollection<RootObject>();
protected override void OnNavigatedTo(NavigationEventArgs e)
{
for (int i = 0; i < 100; i++)
{
collection.Add(new RootObject
{
ItemName = "Item " + i,
Paramether1 = "Paramether1 " + i,
Paramether2 = "Paramether2 " + i,
Paramether3 = "Paramether3 " + i,
Paramether4 = "Paramether4 " + i,
Paramether5 = "Paramether5 " + i,
});
}
OrdersListView.ItemsSource = collection;
}
public ObservableCollection<string> allRoundsSelectedItem;
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<string> AllRoundsSelectedItem
{
get { return allRoundsSelectedItem; }
set
{
allRoundsSelectedItem = value;
OnPropertyChanged();
}
}
private void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
var handler = PropertyChanged;
handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
private void OrdersListView_ItemClick(object sender, ItemClickEventArgs e)
{
var item = e.ClickedItem as RootObject;
AllRoundsSelectedItem = new ObservableCollection<string>
{
item.ItemName,item.Paramether1,
item.Paramether2, item.Paramether3,
item.Paramether4, item.Paramether5,
};
}
}
By my side the RootObject class is like this:
public class RootObject
{
public string ItemName { get; set; }
public string Paramether1 { get; set; }
public string Paramether2 { get; set; }
public string Paramether3 { get; set; }
public string Paramether4 { get; set; }
public string Paramether5 { get; set; }
}
There are maybe other solutions, but you will need either modify your xaml code or the data type of your AllRoundsSelectedItem.
I writing app for UWP.
I have app very similar to Windows 10 Mail app.
I have this UI
Here is xaml of this screen
<Grid BorderBrush="White" BorderThickness="1">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
<Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
</Button.Background>
</Button>
<Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top" Height="43" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
</Button.Background>
</Button>
</Grid>
<Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
</Grid>
<ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
<GridView x:Name="OrdersGridView" >
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock Text="{Binding date_created}" HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock TextAlignment="Center" HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>
</Grid>
I make Binding in code like this:
public async void Down()
{
RestAPI rest = new RestAPI("http://simplegames.com.ua/wp-json/wc/v1/", "ck_9d64c027d2c5f81b8bed3342eeccc6d337be813d", "cs_60697b1e6cbdeb8d62d19e0765e339f8e3334754");
WCObject wc = new WCObject(rest);
//Get all products
var orders = await wc.GetOrders(new Dictionary<string, string>() {
{ "per_page", "100" }, { "status","processing"} }); // Dodelat filtr dlaya teh chto v rabote
string products = orders.ToFormattedJsonString();
List<RootObject> rootObjectData = JsonConvert.DeserializeObject<List<RootObject>>(products);
foreach (RootObject root in rootObjectData)
{
string date = root.date_created;
string name = root.billing.first_name;
Orders = new ObservableCollection<RootObject>(rootObjectData) { new RootObject { date_created = date}
};
OrdersGridView.ItemsSource = Orders;
};
}
}
}
I need to open smth like Fragment.
Here is UI how it need to be like:
How I can do this?
Thank's for help so much!
I'm working on a WIN 8.1 App. In my App I have a ListView where I'm binding a observable collection from a ViewModel. So far everything works fine. The Problem is, that in the Background all the Data will be loaded correctly, but my ListView displays after approximately 40 elements, from the beginning... In the Background the right Object is selected and 80 Objects are loaded.
Could it be a Problem with the Scrolling?
Does anyone know, how to solve this issue?
From an other Page, i navigate to the Page with the ListView:
private void ShowReturnData()
{
ReturnViewModel retVM = new ReturnViewModel(_navigationService, SelectedTour);
_navigationService.NavigateTo(ViewModelLocator.ReturnPageKey, retVM);
}
In my ViewModel Constructor, I add my data to the observable Collection:
I'm working with MVVMlight.
Properties (ObservableCollection, SelectedItem):
--> observable Collection
/// <summary>
/// The <see cref="Data" /> property's name.
/// </summary>
public const string DataPropertyName = "Data";
private ObservableCollection<ReturnData> _myProperty = new ObservableCollection<ReturnData>();
/// <summary>
/// Sets and gets the Data property.
/// Changes to that property's value raise the PropertyChanged event.
/// </summary>
public ObservableCollection<ReturnData> Data
{
get
{
return _myProperty;
}
set
{
if (_myProperty == value)
{
return;
}
_myProperty = value;
RaisePropertyChanged(DataPropertyName);
}
}
--> SelectedItem
/// <summary>
/// The <see cref="SelectedItem" /> property's name.
/// </summary>
public const string SelectedItemPropertyName = "SelectedItem";
private ReturnData _selectedItem = null;
/// <summary>
/// Sets and gets the SelectedTour property.
/// Changes to that property's value raise the PropertyChanged event.
/// </summary>
public ReturnData SelectedItem
{
get
{
return _selectedItem;
}
set
{
if (_selectedItem == value)
{
return;
}
if (_selectedItem != null)
{
_selectedItem.IsFirstItem = false;
_selectedItem.IsLastItem = false;
}
_selectedItem = value;
if (_selectedItem != null)
{
setIsFirstOrLastItem(Data.IndexOf(_selectedItem));
}
RaisePropertyChanged(SelectedItemPropertyName);
}
}
ViewModel Constructor:
public ReturnViewModel(INavigationService navigationService, TourDetailData tourDetails)
{
//Services
_navigationService = navigationService;
//Commands
PrevPageCommand = new RelayCommand(GoToPrevPage);
TourDetails = tourDetails;
TourCustomerName = "Tour " + tourDetails.Tour + " > " + tourDetails.AccountName;
Data = new ObservableCollection<ReturnData>(from i in TourDetails.ReturnData orderby Convert.ToInt32(i.ItemId) select i);
}
XAML:
<ListView x:Name="lvItems"
Grid.Row="2"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
ItemTemplate="{StaticResource ReturnDataTemplate}"
ItemContainerStyle="{StaticResource ReturnDataListViewItemStyle}"
ItemsSource="{Binding Data}"
Margin="0,5,0,0"
Loaded="lvItems_Loaded">
</ListView>
DataTemplate:
<DataTemplate x:Key="ReturnDataTemplate">
<Grid x:Name="grid" d:DesignWidth="1344.53" d:DesignHeight="123.228">
<Grid.Resources>
<converter:SelectionConverter x:Key="SelectionConverter" Context="{Binding}" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="450*"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="5" Height="100" Fill="LightGray" Visibility="Collapsed"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="5" Height="100" Fill="LightGray" Visibility="Collapsed"/>
<!--<Rectangle Grid.Row="0" Grid.ColumnSpan="5" Height="100" Fill="LightGray" Visibility="{Binding IsFirstItem, Converter={StaticResource BoolToVisibilityConverter}}"/>
<Rectangle Grid.Row="2" Grid.ColumnSpan="5" Height="100" Fill="LightGray" Visibility="{Binding IsLastItem, Converter={StaticResource BoolToVisibilityConverter}}"/>-->
<Rectangle Grid.Row="1" Fill="{StaticResource OrangeHighlight}" Visibility="{Binding IsDirty, Converter={StaticResource BoolToVisibilityConverter}}"/>
<StackPanel Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="15,0">
<TextBlock TextWrapping="Wrap" FontSize="42.667" FontFamily="Segoe UI" Text="{Binding ItemId}" FontWeight="SemiBold"/>
<TextBlock TextWrapping="Wrap" Text="{Binding ItemName}" FontSize="32" FontFamily="Segoe UI"/>
</StackPanel>
<!--<TextBox x:Name="tbxReturn" Grid.Row="1" TextWrapping="Wrap" Grid.Column="2" FontFamily="Segoe UI" FontSize="42.667" Text="{Binding Return}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource TextBoxStyleValues}" PreventKeyboardDisplayOnProgrammaticFocus="True" DoubleTapped="tbxReturn_DoubleTapped" GotFocus="tbxReturn_GotFocus" />-->
<TextBox x:Name="tbxReturn" Grid.Row="1" TextWrapping="Wrap" Grid.Column="2" FontFamily="Segoe UI" FontSize="42.667" Text="{Binding Return}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource TextBoxStyleValues}" DoubleTapped="tbxReturn_DoubleTapped" GotFocus="tbxReturn_GotFocus" InputScope="CurrencyAmountAndSymbol" Foreground="#FF520164" />
<TextBox x:Name="tbxMold" Grid.Row="1" TextWrapping="Wrap" Text="{Binding Mildew}" Grid.Column="3" FontFamily="Segoe UI" FontSize="42.667" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource TextBoxStyleValues}" DoubleTapped="tbxMold_DoubleTapped" Tapped="tbxMold_Tapped" GotFocus="tbxMold_GotFocus" InputScope="CurrencyAmountAndSymbol" Foreground="#FF019E90" />
<TextBox x:Name="tbxCredit" Grid.Row="1" TextWrapping="Wrap" Text="{Binding Credit}" Grid.Column="4" FontFamily="Segoe UI" FontSize="42.667" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource TextBoxStyleValues}" DoubleTapped="tbxCredit_DoubleTapped" Tapped="tbxCredit_Tapped" GotFocus="tbxCredit_GotFocus" InputScope="CurrencyAmountAndSymbol" Foreground="#FF005C9C" />
<!--<Button Grid.Row="1" Content="+" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="2" Height="100" Margin="0,-100,0,0" FontSize="48" Style="{StaticResource NumUpDownButtonStyle}" Visibility="{Binding ElementName=lvItems, Path=DataContext.SelectedItem, ConverterParameter=Selected, Converter={StaticResource SelectionConverter}}" Command="{Binding DataContext.IncreaseReturnCommand, ElementName=lvItems}" Opacity="0.9"/>
<Button Grid.Row="1" Content="-" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Column="2" Margin="0,0,0,-100" Height="100" FontSize="48" Style="{StaticResource NumUpDownButtonStyle}" Visibility="{Binding ElementName=lvItems, Path=DataContext.SelectedItem, ConverterParameter=Selected, Converter={StaticResource SelectionConverter}}" Command="{Binding DataContext.DecreaseReturnCommand, ElementName=lvItems}" Opacity="0.9"/>
<Button Grid.Row="1" Content="+" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="3" Height="100" Margin="0,-100,0,0" FontSize="48" Style="{StaticResource NumUpDownButtonStyle}" Visibility="{Binding ElementName=lvItems, Path=DataContext.SelectedItem, ConverterParameter=Selected, Converter={StaticResource SelectionConverter}}" Command="{Binding DataContext.IncreaseMildewCommand, ElementName=lvItems}" Opacity="0.9"/>
<Button Grid.Row="1" Content="-" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Column="3" Margin="0,0,0,-100" Height="100" FontSize="48" Style="{StaticResource NumUpDownButtonStyle}" Visibility="{Binding ElementName=lvItems, Path=DataContext.SelectedItem, ConverterParameter=Selected, Converter={StaticResource SelectionConverter}}" Command="{Binding DataContext.DecreaseMildewCommand, ElementName=lvItems}" Opacity="0.9"/>
<Button Grid.Row="1" Content="+" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="4" Height="100" Margin="0,-100,0,0" FontSize="48" Style="{StaticResource NumUpDownButtonStyle}" Visibility="{Binding ElementName=lvItems, Path=DataContext.SelectedItem, ConverterParameter=Selected, Converter={StaticResource SelectionConverter}}" Command="{Binding DataContext.IncreaseCreditCommand, ElementName=lvItems}" Opacity="0.9"/>
<Button Grid.Row="1" Content="-" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Column="4" Margin="0,0,0,-100" Height="100" FontSize="48" Style="{StaticResource NumUpDownButtonStyle}" Visibility="{Binding ElementName=lvItems, Path=DataContext.SelectedItem, ConverterParameter=Selected, Converter={StaticResource SelectionConverter}}" Command="{Binding DataContext.DecreaseCreditCommand, ElementName=lvItems}" Opacity="0.9"/>-->
</Grid>
</DataTemplate>
Style:
<Style x:Key="ReturnDataListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter x:Name="listViewItemPresenter" d:DesignWidth="938.908" d:DesignHeight="103.083"
ContentMargin="0"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
HorizontalContentAlignment="Stretch"
Padding="0"
PointerOverBackgroundMargin="1"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectionCheckMarkVisualEnabled="False"
SelectedBorderThickness="0"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="15,0,0,0"
SelectedForeground="Black"
SelectedPointerOverBackground="{StaticResource OrangeBackground}"
SelectedPointerOverBorderBrush="{StaticResource OrangeBackground}"
SelectedBackground="{StaticResource OrangeBackground}"
DataContext="{Binding SelectedItem}"
Content="{Binding Mode=OneWay}"
ContentTransitions="{TemplateBinding ContentTransitions}"
PlaceholderBackground="{StaticResource BackgroundGray}">
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--<Setter Property="ContentTemplate" Value="{StaticResource ReturnDataTemplate}"/>-->
</Style>
In the Code behind of the XAML Page, I added the behavior of the ScrollViewer:
private void lvItems_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
SetScrollViewer();
}
private async void SetScrollViewer()
{
if (lvItems.SelectedItem == null)
return;
var item = lvItems.SelectedItem;
var listViewItem = (FrameworkElement)lvItems.ContainerFromItem(item);
if (listViewItem == null)
{
lvItems.ScrollIntoView(item);
}
while (listViewItem == null)
{
await Task.Delay(1);
listViewItem = (FrameworkElement)lvItems.ContainerFromItem(item);
}
var topLeft =
listViewItem
.TransformToVisual(lvItems)
.TransformPoint(new Point()).Y;
var lvih = listViewItem.ActualHeight;
var lvh = lvItems.ActualHeight;
var desiredTopLeft = (lvh - lvih) / 2.0;
var desiredDelta = topLeft - desiredTopLeft;
// Calculations relative to the ScrollViewer within the ListView
var scrollViewer = lvItems.GetFirstDescendantOfType<ScrollViewer>();
var currentOffset = scrollViewer.VerticalOffset;
var desiredOffset = currentOffset + desiredDelta;
//scrollViewer.ScrollToVerticalOffset(desiredOffset);
// better yet if building for Windows 8.1 to make the scrolling smoother use:
scrollViewer.ChangeView(null, desiredOffset, null);
}
The property in the database is image. What's in the content is binary data. This is the datatemplate of the listbox:
<DataTemplate x:Key="ItemTemplate">
<Grid Width="467" Height="123" Margin="5,0,0,0">
<Image Name="imgProduct" Source="{Binding pImage}" HorizontalAlignment="Left" Margin="0,5" Width="115"/>
<TextBlock Text="{Binding pName}" Margin="120,0,133,92" Foreground="Black" FontFamily="Tahoma" FontSize="22.667"/>
<TextBlock Text="{Binding pPrice}" Margin="146,69,263,35" Foreground="Black" FontSize="13.333"/>
<TextBlock Text="{Binding pQty}" Margin="232,30,183,76" Foreground="#FF11BB00" FontSize="13.333" FontFamily="Tahoma"/>
<TextBlock Text="{Binding pRewardCost}" Margin="433,89,0,14" FontSize="13.333" Foreground="#7F000000"/>
<TextBlock Text="{Binding pSalesPrice}" Margin="155,85,233,14" Foreground="#FF005910" FontSize="17.333" RenderTransformOrigin="-0.196,0.375"/>
<TextBlock HorizontalAlignment="Left" Margin="120,31,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="13.333" Height="15" Width="114">
<Run Text="Quantity Available:"/>
<LineBreak/>
<Run Text=":"/>
</TextBlock>
<TextBlock HorizontalAlignment="Left" Margin="120,69,0,0" TextWrapping="Wrap" Text="SGD" VerticalAlignment="Top" FontSize="13.333" RenderTransformOrigin="-1.923,0.625" Foreground="Black"/>
<TextBlock HorizontalAlignment="Left" Margin="120,85,0,0" TextWrapping="Wrap" Text="SGD" VerticalAlignment="Top" FontSize="17.333" RenderTransformOrigin="-1.923,0.625"/>
<TextBlock HorizontalAlignment="Left" Margin="318,89,0,0" TextWrapping="Wrap" Text="Reward Points cost:" VerticalAlignment="Top" FontSize="13.333" Foreground="#7F000000"/>
<InkPresenter HorizontalAlignment="Left" Height="2" Margin="122,75,0,0" VerticalAlignment="Top" Width="74" Background="Black" RenderTransformOrigin="0.5,0.5">
<InkPresenter.RenderTransform>
<CompositeTransform ScaleY="-1"/>
</InkPresenter.RenderTransform>
</InkPresenter>
<InkPresenter HorizontalAlignment="Left" Height="2" Margin="0,117,0,0" VerticalAlignment="Top" Width="467" Background="#66000000"/>
</Grid>
</DataTemplate>
The C# Code that consumes the database and shows as items on the listbox is as below:
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
var pdtQry = from pdt in fypDB.Products
select pdt;
productCollection = new DataServiceCollection<Product>();
productCollection.LoadCompleted += new
EventHandler<LoadCompletedEventArgs>(productCollection_LoadCompleted);
productCollection.LoadAsync(pdtQry);
}
void productCollection_LoadCompleted(Object sender, LoadCompletedEventArgs e)
{
if (productCollection.Continuation != null) productCollection.LoadNextPartialSetAsync();
else
{
listboxSearch.ItemsSource = productCollection;
}
}
After debugging, pName, pPrice, pQty, pRewardCost, and pSalesPrice. However the image is not displayed. I think it may be because the image is not of the same format. The format in dbo is image and is <binary data>. Is there any way to convert and display it? Thanks in advance!!