We Keep Coding

How to add new stackpanel when new item added?

The problem that I'm facing is I want everytime user enter the item code all related details insert in a new stackpanel. that's means every item added will added a new stackpanel. 1 stackpanel will have 1 item. but I couldn't get how to do it that way.
this is the code behind when user key in barcode and press 'Enter'
private void txtItemCode_KeyDown(object sender, KeyEventArgs e)
{
try
{
string itemCode = txtItemCode.Text;
StackPanel spItemDisplay = new StackPanel();
spItemDisplay.Orientation = Orientation.Horizontal;
if (e.Key == Key.Return)
{
spItemDisplay.Children.Add(spItemDisplay);
SimpleItem item = cashierViewModel.validateItemOnHandCode(txtItemCode.Text, 1);
if (item != null)
{
cashierViewModel.AddItemToList(item, PosWindows2.cashier.ShopId);
LoadData();
dgItemDisplay.ItemsSource = null;
dgItemDisplay.ItemsSource = CashierViewModel.itemDisplayList;
}
else
{
MessageBox.Show("Item Not Available.", "Alert", MessageBoxButton.OK, MessageBoxImage.Information);
}
txtItemCode.Text = null;
}
}
this is at .xaml
<StackPanel x:Name="spItemDisplay" >
<ScrollViewer HorizontalAlignment="Right" >
<DataGrid CellEditEnding="DgItemDisplay_CellEditEnding" HorizontalAlignment="Center" Width="1036" Name="dgItemDisplay" AutoGenerateColumns="False" Height="auto" >
<DataGrid.Columns>
<DataGridTextColumn IsReadOnly="True" x:Name="dgItemCode" Width="200" Header="Barcode" Binding="{Binding ItemCode}" />
<DataGridTextColumn IsReadOnly="True" x:Name="dgItemName" Width="350" Header="Item Name" Binding="{Binding ItemName}" />
<DataGridTextColumn IsReadOnly="True" x:Name="dgItemPrice" Width="150" Header="Item Price" Binding="{Binding ItemPrice}" />
<DataGridTextColumn x:Name="dgQuantity" Width="150" Header="Quantity" Binding="{Binding Quantity, UpdateSourceTrigger=PropertyChanged}" />
<DataGridTextColumn x:Name="dgDiscount" Width="150" Header="Discount" Binding="{Binding Discount, UpdateSourceTrigger=PropertyChanged}" />
</DataGrid.Columns>
<DataGrid.RowDetailsTemplate>
<DataTemplate >
<StackPanel Name="spItem" HorizontalAlignment="Center" >
<Grid Margin="0,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="300" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="Quantity: " FontWeight="Bold" Grid.Column="2" Grid.Row="0"/>
<TextBox x:Name="txtQty" Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged}" Grid.Column="3" Grid.Row="0"/>
<TextBlock Text="Discount: " FontWeight="Bold" Grid.Column="2" Grid.Row="1"/>
<TextBox x:Name="txtDisc" Text="{Binding Discount, UpdateSourceTrigger=PropertyChanged}" Grid.Column="3" Grid.Row="1"/>
</Grid>
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
</DataGrid>
</ScrollViewer>
</StackPanel>
can anybody help ? I really need your help. Thank you :)

Can't you go for an ItemsControl/ListView, that has an StackPanel(for spItemDisplay) as an ItemsPanelTemplate and specify the DataTemplate as your StackPanel (spItem)?
Something along these lines:
<ItemsControl ItemsSource="{Binding DisplayItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="spItem">
<Grid Margin="0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Quantity: "/>
<TextBlock Text="{Binding Quantity}"/>
<TextBlock/>
</Grid>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
UPDATE:
If you're not familiar with DataTemplates please have a look at Andy's link in the comments or have a look at the following example.
Items Control + DataTemplate explained

Bind Combobox in WPF to Entity class

I have a data input form where i have textboxes,comboboxes and datepickers. I want to Bind comboboxes to the DB column so that users select the correct value for insertion. I have attached the viewmodel class and XAML code. In the viewmodel code "private void GetSW()" - this gets all the list of the entity class and "private void addSW()" this adds the record to the DB, Except the combobox binding everything works fine. in XAML i have binded combobox like this but this give blank combobox, please help what i am missing. I researched many topics on this forum but didn't find any solution
<ComboBox x:Name="PSW" Grid.Column="3" Grid.Row="2" ItemsSource="{Binding newSW.PreviousSW}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="20"/>
Its a ViewModel Code
using BusinessEntities;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
using MUDB.Services;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
namespace MUDB.Ui.Logic
{
public class SoftwareVersionListViewModel:ViewModelBase
{
private bool enableRowDetails=false;
public bool EnagleRowDetails
{
get { return enableRowDetails; }
set {
enableRowDetails = value;
RaisePropertyChanged();
}
}
public SoftwareVersionListViewModel()
{
SaveSW = new RelayCommand(addSW);
//savecommand = new RelayCommand(addprod);
GetSW();
newSW = new SoftwareDefEntity();
EditSW = new RelayCommand(() => {
EnagleRowDetails = true;
MessageBox.Show("Edit button clicked!!");});
//SWList = new SoftwareDefEntity(); //Initializing the object of the Entity class
}
public List<SoftwareDefEntity> SWentities
{
get;
set;
}
private SoftwareDefEntity _selectedsw;
public SoftwareDefEntity Selectedsw
{
get { return _selectedsw; }
set
{
_selectedsw = value; //This will get all the values of that particular Selected row that are defined in the entity class
EnagleRowDetails = false; //Reset boolean value EnagleRowDetails, so that the selected rowdetails are disabled until Edit button is not clicked.
//ShowView();
}
}
public RelayCommand SaveSW { get; private set; }
public RelayCommand EditSW { get; private set; }
public SoftwareDefEntity newSW { get; private set; }
private void ShowView()
{
//cUSTOM METHODS
}
private void GetSW() // Method that reads the data from the service layer
{
SWDefService obj = new SWDefService();
SWentities = obj.getSW() ; //getSW is the method refered in Service layer
}
private void addSW()
{
SWDefService obj = new SWDefService();
obj.addSW(newSW); //newproduct object will hold the value of the binded control, in XAML its binded like this "{Binding newproduct.ProductName(ProductName is the field name in the entityclass/DB table)}"
newSW = new SoftwareDefEntity();
}
}
}
This is the XAML Code
<UserControl x:Class="MUDB.Ui.CreateSW"
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:MUDB.Ui"
xmlns:converter="clr-namespace:MUDB.Ui.Logic.Converters;assembly=MUDB.Ui.Logic"
xmlns:enums="clr-namespace:MUDB.Ui.Logic.Enums;assembly=MUDB.Ui.Logic"
mc:Ignorable="d" Height="Auto" Width="Auto"
DataContext="{Binding SoftwareVersionList,Source={StaticResource Locator}}" >
<UserControl.Resources>
<converter:RadioButtonToBooleanConverter x:Key="RadioButtonToBooleanConverter" />
</UserControl.Resources>
<Grid>
<Border Background="#90000000" Visibility="{Binding Visibility}">
<Border BorderBrush="Black" BorderThickness="1" Background="White"
CornerRadius="10,0,10,0" VerticalAlignment="Center"
HorizontalAlignment="Center">
<Border.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Opacity="0.5" Direction="270" ShadowDepth="0.7" />
</Border.BitmapEffect>
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="25"/>
<RowDefinition Height="30"/>
<RowDefinition Height="25"/>
<RowDefinition Height="30"/>
<RowDefinition Height="25"/>
<RowDefinition Height="30"/>
<RowDefinition Height="100"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Label Content="Create New Software Version" Grid.Column="0" Grid.Row="0" Foreground="White" Background="black"
HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.ColumnSpan="3" />
<Label Content="ECU" Grid.Column="0" Grid.Row="1" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Label Content="Software Name" Grid.Column="1" Grid.Row="1" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Label Content="Previous Software" Grid.Column="2" Grid.Row="1" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Label Content="Request Freeze Date" Grid.Column="0" Grid.Row="3" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Label Content="Request Freeze Status" Grid.Column="1" Grid.Row="3" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Bottom" />
<Label Content="Software Freeze Date" Grid.Column="0" Grid.Row="5" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Center" />
<Label Content="Software Freeze Status" Grid.Column="1" Grid.Row="5" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Center" />
<Label Content="Comments" Grid.Column="0" Grid.Row="7" Foreground="Black" HorizontalAlignment="Left"
VerticalAlignment="Center" />
<ComboBox x:Name="ECU" Grid.Column="0" Grid.Row="2" Text="{Binding newSW.ECU}" Margin="10 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Height="Auto">
<ComboBoxItem Name="cbi1">ACM</ComboBoxItem>
<ComboBoxItem Name="cbi2">MCM</ComboBoxItem>
</ComboBox>
<TextBox x:Name="SW" Grid.Column="1" Grid.Row="2" Text="{Binding newSW.SoftwareName}" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="150" />
<ComboBox x:Name="PSW" Grid.Column="3" Grid.Row="2" ItemsSource="{Binding PreviousSW}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="20"/>
<DatePicker Grid.Column="0" Grid.Row="4" Margin="10 0 0 0" HorizontalAlignment="Left" VerticalAlignment="top" SelectedDate="{Binding newSW.Req_Freeze_Date}" Height="Auto" Width="Auto"/>
<DatePicker Grid.Column="0" Grid.Row="6" Margin="10 0 0 0" HorizontalAlignment="Left" VerticalAlignment="top" SelectedDate="{Binding newSW.SW_Freeze_Date}" Height="Auto" Width="Auto"/>
<RadioButton Content="Yes" GroupName="ReQstat" IsChecked="{Binding newSW.Req_Freeze_Status, Mode=OneWayToSource, Converter={StaticResource RadioButtonToBooleanConverter}, ConverterParameter={x:Static enums:RadioSelectionEnum.Yes}}" Style="{StaticResource AccentRadioButton}" Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left" VerticalAlignment="Top" Height="14" Width="Auto"/>
<RadioButton Content="No" GroupName="ReQstat" IsChecked="{Binding newSW.Req_Freeze_Status, Mode=OneWayToSource, Converter={StaticResource RadioButtonToBooleanConverter}, ConverterParameter={x:Static enums:RadioSelectionEnum.No}}" Style="{StaticResource AccentRadioButton}" Grid.Column="1" Grid.Row="4" Margin="60 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto"/>
<RadioButton Content="Yes" GroupName="SWstat" IsChecked="{Binding newSW.SW_Freeze_Status, Mode=OneWayToSource, Converter={StaticResource RadioButtonToBooleanConverter}, ConverterParameter={x:Static enums:RadioSelectionEnum.Yes}}" Style="{StaticResource AccentRadioButton}" Grid.Column="1" Grid.Row="6" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto"/>
<RadioButton Content="No" GroupName="SWstat" IsChecked="{Binding newSW.SW_Freeze_Status, Mode=OneWayToSource, Converter={StaticResource RadioButtonToBooleanConverter}, ConverterParameter={x:Static enums:RadioSelectionEnum.No}}" Style="{StaticResource AccentRadioButton}" Grid.Column="1" Grid.Row="6" Margin="60 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto"/>
<TextBox x:Name="CommenttextBox" Grid.Column="1" Grid.Row="7" HorizontalAlignment="Left" Height="69" TextWrapping="WrapWithOverflow" VerticalAlignment="Center" Text="{Binding Comment}" Width="170" Margin="4.4,2.2,0,0" />
<UniformGrid Grid.Row="9" Margin="2" Columns="2" HorizontalAlignment="Stretch"
VerticalAlignment="Center" Height="Auto">
<Button x:Name="SaveButton" Command="{Binding SaveSW}" Content="Save" Height="27" />
<Button x:Name="CloseButton" Click="CloseButton_Click" Content="Close" Height="26" />
</UniformGrid>
</Grid>
</Border>
</Border>
</Grid>
</UserControl>

I guess you want to display the list of SoftwareDefEntity objects in your ComboBox.
Bind to the SWentities property then:
<ComboBox x:Name="PSW" Grid.Column="3" Grid.Row="2" ItemsSource="{Binding SWentities}" DisplayMemberPath="Name" ... />
And raise the PropertyChanged event in its setter of this property:
private List<SoftwareDefEntity> _swEntities;
public List<SoftwareDefEntity> SWentities
{
get { return _swEntities; }
set { _swEntities = value; RaisePropertyChanged(); }
}

This is the code to bind the data to combobox. i did not add any of other controls since those are working fine at your place. Observable collection is easy way to bind combobox .
Here is your View Model..
public class SoftwareVersionListViewModel : ViewModelBase
{
public SoftwareVersionListViewModel()
{
GetSW();
}
//Define the observable collection
private ObservableCollection<SoftwareDefEntity> _SWmappings2 = new ObservableCollection<SoftwareDefEntity>();
//here is your Entity list
public List<SoftwareDefEntity> SWentities
{
get;
set;
}
// Obeservable collection property for access
public ObservableCollection<SoftwareDefEntity> SWmappings2
{
get { return _SWmappings2; }
set
{
_SWmappings2 = value;
OnPropertyChanged("appeventmappings2");
}
}
/// <summary>
/// load the combobox
/// </summary>
private void GetSW() // Method that reads the data from the service layer
{
SWDefService obj = new SWDefService();
SWentities = obj.getSW(); //getSW is the method refered in Service layer
SWentities.ForEach(_SWmappings2.Add);
}
}
and Xaml...
<ComboBox x:Name="ComboBox" ItemsSource="{Binding SWmappings2, UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="PreviousSW" SelectedItem="{Binding PreviousSW, Mode=TwoWay}" Grid.Row="0" >
</ComboBox>

screen coordinates to sharpdx device context coordinates

I am new to the sharpdx.
My current work flow is user can capture a pictures using webcam or any cam devices.now i am working to the new feature for users. user able to draw anything at top the image like (mspaint drawing)..
So i desired to take xy points in mouse move event ...and its worked perfectly
This Is My Designer code:-
<Page x:Class="TEST.GraphicsPage"
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:enums="clr-namespace:TEST.Model.Enum;assembly=TEST.Core"
xmlns:common="clr-namespace:TEST.Core.Common;assembly=TEST.Core"
xmlns:controls="clr-namespace:TEST.View.Controls"
xmlns:metro="http://schemas.codeplex.com/elysium"
xmlns:params="http://schemas.codeplex.com/elysium/params"
mc:Ignorable="d"
DataContext="{Binding Graphics, Source={StaticResource Locator}}" d:DesignHeight="800" d:DesignWidth="800"
Title="GraphicsPage" Loaded="GraphicsPage_OnLoaded" Unloaded="GraphicsPage_OnUnloaded" MouseLeftButtonDown="Page_MouseLeftButtonDown" MouseLeftButtonUp="Page_MouseLeftButtonUp" PreviewMouseMove="Page_PreviewMouseMove">
<Grid x:Name="GrdPage" PreviewMouseDown="GrdPage_OnPreviewMouseDown" PreviewMouseWheel="GrdPage_OnPreviewMouseWheel"
PreviewMouseMove="GrdPage_OnPreviewMouseMove" PreviewTouchDown="GrdPage_OnPreviewTouchDown">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="{Binding BackgroundImage,Mode=TwoWay}" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel x:Name="spRetake" Margin="0,13,0,0">
<Button Style="{DynamicResource BackButtonStyle}" Click="ButtonTrigger" CommandParameter="{x:Static enums:ButtonTriggerType.GoBack}" Command="{x:Static NavigationCommands.BrowseBack}" />
<TextBlock Text="Retake" Foreground="White" FontSize="15" HorizontalAlignment="Center" Margin="0,5,0,3" />
</StackPanel>
<Grid x:Name="GrdGraphics" Grid.Row="0" Grid.Column="1" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid x:Name="grdImage" Grid.Column="0" Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10,20,10,10">
<Grid HorizontalAlignment="Center" VerticalAlignment="Top">
///Image is render to this control
<Image x:Name="ImgPhoto" Source="{Binding ImageSource}" VerticalAlignment="Top" MaxHeight="1000" MaxWidth="1400" MouseLeftButtonDown="ImgPhoto_MouseLeftButtonDown" MouseLeftButtonUp="ImgPhoto_MouseLeftButtonUp" MouseMove="ImgPhoto_MouseMove" LostMouseCapture="ImgPhoto_LostMouseCapture" />
///image control
</Grid>
<common:ProgressRing x:Name="PrLoading" Margin="100" Width="50" Height="50" VerticalAlignment="Center" IsActive="True" Foreground="{StaticResource VioletBrush}" Visibility="{Binding IsProgressVisible, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
<Grid Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="#99000000" Width="350" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="GrdBorders" Margin="0,1,5,0" Visibility="{Binding ElementName=RbBorders, Path=IsChecked, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid x:Name="GrdBorderTitle" Margin="5,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Background="{StaticResource GreenBrushTransparent}" Width="50" Height="45" Orientation="Horizontal">
<Path Data="M0,9.6240009L6.6444809,9.6240009 6.6444809,13.513288 3.8906012,13.513288 3.8906012,52.242962 50.401927,52.242962 50.401927,49.327709 54.29,49.327709 54.29,56.134999 0,56.134999z M13.596372,3.8918467L13.596372,42.622032 60.1081,42.622032 60.1081,3.8918467z M9.7070002,0L64.000003,0 64.000003,46.509999 9.7070002,46.509999z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="5,0,0,0" RenderTransformOrigin="0.5,0.5" />
</StackPanel>
<StackPanel Grid.Column="2" Background="{StaticResource GreenBrushTransparent}" Orientation="Horizontal">
<TextBlock Text="Borders" FontSize="22" FontWeight="Light" Foreground="White" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<ListView x:Name="LstBorders" Background="Transparent" Margin="10,0,0,0" Grid.Row="1"
SelectionChanged="LstBorders_SelectionChanged" ItemTemplate="{StaticResource GrapicsBorders}" OverridesDefaultStyle="True" ItemContainerStyle="{StaticResource GraphicsBorderListViewItemStyle}" Style="{StaticResource BackgroundGalleryListViewStyle}" />
</Grid>
<Grid Grid.Column="0" x:Name="GrdEffects" Margin="5,1,5,0" Visibility="{Binding ElementName=RbFilters, Path=IsChecked, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid x:Name="GrdEffectsTitle" Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Background="{StaticResource GreenBrushTransparent}" Width="50" Height="45" Orientation="Horizontal">
<Path HorizontalAlignment="Left" Data="M44.02605,20.846C44.02605,20.846 63.682006,24.103257 63.682006,38.870418 63.682006,42.772187 63.682006,49.664208 63.682006,53.565377 63.682006,66.221799 51.658645,58.015256 51.658645,50.555524 51.658645,40.738351 60.340182,37.173087 56.365394,33.199718z M25.529025,0C34.740886,0,39.964213,12.976948,40.281676,22.477042L40.293128,23.153271 40.635634,23.496004C44.15071,27.013427 48.794879,31.660645 50.360019,33.226604 52.995978,35.863305 51.193019,38.789006 50.089023,39.892009 48.98503,40.995406 28.241208,61.738416 28.241208,61.738416 25.936236,64.043717 17.883273,59.726617 10.261396,52.099114 2.63244,44.474008 -1.684536,36.421304 0.6204343,34.116004L22.599233,12.137394C22.599233,12.137394 24.072108,10.731551 26.071624,10.752226 27.118989,10.763056 28.310851,11.165289 29.511216,12.365994L31.998191,14.858796C33.357127,19.144596 32.48714,22.803398 31.852197,24.675799 30.646153,25.4376 29.839215,26.7741 29.839215,28.308002 29.839215,30.683002 31.76516,32.610805 34.144168,32.610805 36.52415,32.610805 38.450095,30.683002 38.450095,28.308002 38.450095,26.808 37.681121,25.490899 36.519145,24.7214 36.644145,23.702499 36.722144,21.654397 36.354106,19.211597 36.354106,19.211597 36.823226,19.681035 37.592975,20.451304L37.670257,20.528639 37.615382,20.036525C36.595061,11.949274 32.102916,2.4615231 25.529025,2.4615231 17.491012,2.4615231 15.683008,10.664832 15.683008,13.53907L13.222004,13.53907C13.222004,8.3047702,16.56301,0,25.529025,0z" Stretch="Uniform" Fill="#FFFFFFFF" Width="27" Height="27" Margin="5,0,0,0" RenderTransformOrigin="0.5,0.5" />
</StackPanel>
<StackPanel Grid.Column="2" Background="{StaticResource GreenBrushTransparent}" Orientation="Horizontal">
<TextBlock Text="Filters" FontSize="22" FontWeight="Light" Foreground="White" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<ListView x:Name="LstAdvancedEffect" Width="245" BorderBrush="White" Background="Transparent" Margin="10,0,0,0" Grid.Row="1"
ItemTemplate="{StaticResource AdvancedEffect}" OverridesDefaultStyle="True" ItemContainerStyle="{StaticResource GraphicsEffectsListViewItemStyle}" Style="{StaticResource BackgroundGalleryListViewStyle}" />
</Grid>
<Grid Grid.Column="0" x:Name="GrdEdit" Margin="5,1,5,0" VerticalAlignment="Top" Visibility="{Binding ElementName=RbEdit, Path=IsChecked, Mode=TwoWay, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="GrdEditTitle" Margin="0,0,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Background="{StaticResource GreenBrushTransparent}" Width="50" Height="45" Orientation="Horizontal">
<Path Data="M28.359835,24.709L34.154998,30.052877 27.489999,31.461998z M21.8047,9.3869993L35.634799,9.3869993 30.5925,14.785472 22.157498,14.785472 21.7942,26.555977C21.7942,26.555977,21.324199,34.340181,12.747299,33.399679L5.3957494,33.19948 5.3957494,66.641893C5.395749,67.386995,6.0026888,67.990496,6.7473091,67.990496L44.531299,67.990496C45.273398,67.990496,45.880099,67.386995,45.880099,66.641893L45.880099,26.531576 51.279998,21.086176 51.279998,66.641893C51.279998,70.368498,48.2578,73.386999,44.531299,73.386999L6.7473091,73.386999C3.020749,73.386999,-1.0840647E-06,70.368498,3.4106051E-13,66.641893L3.4106051E-13,32.391882 2.6718787,29.574478 2.674559,29.49638 16.676999,14.785472 16.637898,14.785472 12.894499,18.732675 16.816399,14.579372 16.872298,14.579372 16.996098,14.449471 17.007798,14.449471z M43.024932,5.7089984L52.443,14.399388 40.817794,27.000999 40.619792,25.005898 37.516936,23.951198 37.429824,21.838896 34.333331,21.018594 33.961013,18.635792 31.396998,18.307692z M49.488421,0.0016288757C49.906531,0.018204689,50.296157,0.1614809,50.599376,0.4401598L57.271087,6.5981958C58.080863,7.3442647,57.976867,8.7787952,57.033995,9.7973371L55.755431,11.184999 46.149001,2.3229232 47.428763,0.93428135C48.01562,0.298316,48.791575,-0.026000023,49.488421,0.0016288757z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="5,0,5,0" RenderTransformOrigin="0.5,0.5" />
</StackPanel>
<StackPanel Grid.Column="2" Background="{StaticResource GreenBrushTransparent}" Orientation="Horizontal">
<TextBlock Text="Basic Edit" FontSize="22" FontWeight="Light" Foreground="White" VerticalAlignment="Center" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<StackPanel Grid.Row="1" Orientation="Vertical" Margin="10,0,0,0">
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Brightness" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Brightness" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Contrast" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Contrast" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Saturation" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Saturation" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Temp" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Temp" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Tint" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Tint" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
<StackPanel Margin="0,0,0,8">
<TextBlock Text="Sharpen / Blur" FontSize="18" Foreground="#929292" Margin="0,0,0,5" />
<Slider x:Name="Blur" params:Slider.ThumbThickness="9" HorizontalAlignment="Stretch" Margin="0,5,0,5" Minimum="-100" Maximum="100" Foreground="White" FontSize="18" FontWeight="Light" VerticalAlignment="Center" ValueChanged="Slider_ValueChanged" Style="{StaticResource SliderStyle}" />
</StackPanel>
</StackPanel>
</Grid>
<StackPanel Grid.Column="1" HorizontalAlignment="Right">
<RadioButton x:Name="RbFilters" Margin="0,0,0,10" Height="55" IsChecked="{Binding IsFilterChecked,Mode=TwoWay}" Style="{StaticResource EffectsRadioButtonStyle}" Visibility="{Binding IsFilter,Mode=TwoWay,Converter={StaticResource BooleanToVisibilityConverter}}">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Path HorizontalAlignment="Left" Data="M44.02605,20.846C44.02605,20.846 63.682006,24.103257 63.682006,38.870418 63.682006,42.772187 63.682006,49.664208 63.682006,53.565377 63.682006,66.221799 51.658645,58.015256 51.658645,50.555524 51.658645,40.738351 60.340182,37.173087 56.365394,33.199718z M25.529025,0C34.740886,0,39.964213,12.976948,40.281676,22.477042L40.293128,23.153271 40.635634,23.496004C44.15071,27.013427 48.794879,31.660645 50.360019,33.226604 52.995978,35.863305 51.193019,38.789006 50.089023,39.892009 48.98503,40.995406 28.241208,61.738416 28.241208,61.738416 25.936236,64.043717 17.883273,59.726617 10.261396,52.099114 2.63244,44.474008 -1.684536,36.421304 0.6204343,34.116004L22.599233,12.137394C22.599233,12.137394 24.072108,10.731551 26.071624,10.752226 27.118989,10.763056 28.310851,11.165289 29.511216,12.365994L31.998191,14.858796C33.357127,19.144596 32.48714,22.803398 31.852197,24.675799 30.646153,25.4376 29.839215,26.7741 29.839215,28.308002 29.839215,30.683002 31.76516,32.610805 34.144168,32.610805 36.52415,32.610805 38.450095,30.683002 38.450095,28.308002 38.450095,26.808 37.681121,25.490899 36.519145,24.7214 36.644145,23.702499 36.722144,21.654397 36.354106,19.211597 36.354106,19.211597 36.823226,19.681035 37.592975,20.451304L37.670257,20.528639 37.615382,20.036525C36.595061,11.949274 32.102916,2.4615231 25.529025,2.4615231 17.491012,2.4615231 15.683008,10.664832 15.683008,13.53907L13.222004,13.53907C13.222004,8.3047702,16.56301,0,25.529025,0z" Stretch="Uniform" Fill="#FFFFFFFF" Width="27" Height="27" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5" />
<TextBlock Text="Filters" Foreground="White" HorizontalAlignment="Center" Margin="0,0,0,3" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
<RadioButton x:Name="RbBorders" Margin="0,0,0,10" Width="60" Height="55" IsChecked="{Binding IsBorderChecked,Mode=TwoWay}" Style="{StaticResource EffectsRadioButtonStyle}" Visibility="{Binding IsBorder,Mode=TwoWay,Converter={StaticResource BooleanToVisibilityConverter}}">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Path Data="M0,9.6240009L6.6444809,9.6240009 6.6444809,13.513288 3.8906012,13.513288 3.8906012,52.242962 50.401927,52.242962 50.401927,49.327709 54.29,49.327709 54.29,56.134999 0,56.134999z M13.596372,3.8918467L13.596372,42.622032 60.1081,42.622032 60.1081,3.8918467z M9.7070002,0L64.000003,0 64.000003,46.509999 9.7070002,46.509999z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5" />
<TextBlock Text="Borders" Foreground="White" HorizontalAlignment="Center" Margin="0,0,0,3" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
<RadioButton x:Name="RbEdit" Height="55" Margin="0,0,0,10" IsChecked="{Binding IsEditChecked,Mode=TwoWay}" Style="{StaticResource EffectsRadioButtonStyle}" Visibility="{Binding IsEdit,Mode=TwoWay,Converter={StaticResource BooleanToVisibilityConverter}}">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Path Data="M28.359835,24.709L34.154998,30.052877 27.489999,31.461998z M21.8047,9.3869993L35.634799,9.3869993 30.5925,14.785472 22.157498,14.785472 21.7942,26.555977C21.7942,26.555977,21.324199,34.340181,12.747299,33.399679L5.3957494,33.19948 5.3957494,66.641893C5.395749,67.386995,6.0026888,67.990496,6.7473091,67.990496L44.531299,67.990496C45.273398,67.990496,45.880099,67.386995,45.880099,66.641893L45.880099,26.531576 51.279998,21.086176 51.279998,66.641893C51.279998,70.368498,48.2578,73.386999,44.531299,73.386999L6.7473091,73.386999C3.020749,73.386999,-1.0840647E-06,70.368498,3.4106051E-13,66.641893L3.4106051E-13,32.391882 2.6718787,29.574478 2.674559,29.49638 16.676999,14.785472 16.637898,14.785472 12.894499,18.732675 16.816399,14.579372 16.872298,14.579372 16.996098,14.449471 17.007798,14.449471z M43.024932,5.7089984L52.443,14.399388 40.817794,27.000999 40.619792,25.005898 37.516936,23.951198 37.429824,21.838896 34.333331,21.018594 33.961013,18.635792 31.396998,18.307692z M49.488421,0.0016288757C49.906531,0.018204689,50.296157,0.1614809,50.599376,0.4401598L57.271087,6.5981958C58.080863,7.3442647,57.976867,8.7787952,57.033995,9.7973371L55.755431,11.184999 46.149001,2.3229232 47.428763,0.93428135C48.01562,0.298316,48.791575,-0.026000023,49.488421,0.0016288757z" Stretch="Uniform" Fill="#FFFFFFFF" Width="28" Height="28" Margin="0,0,5,0" RenderTransformOrigin="0.5,0.5" />
<TextBlock Text="Edit" Foreground="White" HorizontalAlignment="Center" Margin="0,0,0,3" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
</StackPanel>
</Grid>
</Grid>
</Grid>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BorderBrush="{StaticResource GreenBrush}" BorderThickness="0,2,0,0" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="#4C000000" Height="75">
<Button Height="40" Width="100" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" Content="Next" Style="{DynamicResource NextButtonStyle}" Click="ButtonTrigger" CommandParameter="{x:Static enums:ButtonTriggerType.Next}" />
</Border>
<MediaElement Grid.Row="0" Grid.Column="0" x:Name="MdeBackgroundMusic" Source="{Binding BackgroundMusic}" Visibility="Collapsed" LoadedBehavior="Play" UnloadedBehavior="Manual" MediaEnded="MdeBackgroundMusic_OnMediaEnded" />
</Grid>
</Page>
Codebehind
//List for added points
public List<Point> DrawPoint = new List<Point>();
and my mouse move event like this
private void Page_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (draw)
{
if (DrawPoint .Count > 0)
{
var exist = DrawPoint .Any(i => i == e.Getpostion(null));
if (!exist)
{
DrawPoint .Add(e.Getpostion(null));
}
else
{
DrawPoints.Add(e.Getpostion(null));
}
}
}
}
at that time i was draw the points to the render method like this
if (_point != null){
SolidColorBrush aBrush = new SolidColorBrush(_d2DContext, SharpDX.Color.Red);
//looped every added point in user
foreach (var point in _point)
{
_d2DContext.FillEllipse(new Ellipse(new Vector2((float)point.X, (float)point.Y), 10, 10), aBrush);
}
}
but drawed points its wrong what is iam missing. please help me out
Image Notes
Redpoint is now brush the point using above code
X Mark indicates mouse postion on the image.

I have faced similar Issue when i working my last project
in your Move Event
//get current touch point
var currentPoint = e.GetTouchPoint(this);
// calculate screen margin for grid image left
var x = (currentPoint.Bounds.X - (spRetake.ActualWidth + grdImage.Margin.Left)) / grdImage.ActualWidth;
var y = (currentPoint.Bounds.Y - grdImage.Margin.Top) / grdImage.ActualHeight;
DrawPoints.Add(new System.Windows.Point(x,y));
And Your Device Class you Need to calculate rendering device width and height also you should calculate orginal image width and height rendering image actual width
// original dimensions
var width = CurrentBitmapSize.Width;
var height = CurrentBitmapSize.Height;
// Find the longest and shortest dimentions
var longestDimension = (width > height) ? width : height;
var shortestDimension = (width < height) ? width : height;
var factor = ((double)longestDimension) / (double)shortestDimension;
// Set width as max
double newWidth = (float)_d2DContext.PixelSize.Width;
var newHeight = (float)_d2DContext.PixelSize.Width / factor;
//If height is actually greater, then we reset it to use height instead of width
if (width < height)
{
newWidth = (float)_d2DContext.PixelSize.Height / factor;
newHeight = (float)_d2DContext.PixelSize.Height;
}
_drawBrush = new SolidColorBrush(d2DContext, SharpDX.Color.Blue);
var pWidth = _d2DContext.PixelSize.Width;
var pHeight = _d2DContext.PixelSize.Height;
int elipseWidth = 10;
int elipseheight = 15;
foreach (var point in MousePoints.Distinct().ToList())
{
var x = (point.X * pWidth) + (elipseWidth / 2);
var y = (point.Y * pHeight) + (elipseheight / 2);
var ellipseCenter = new Vector2((float)x, (float)y);
var ellipse = new Ellipse(ellipseCenter, elipseWidth, elipseheight);
//omit if the point not in image container
if (newWidth >= x && newHeight >= y + 2)
{
d2DContext.FillEllipse(ellipse, _drawBrush);
}
}
i think its should worked for you...Any Queries Comment It..

Change Background color of grid row when selected

My itemscontrol is currently loading each row correctly. I am trying to get it to change the background color of each row when the user selects it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0">
<Border BorderBrush="#BBBDBF" Background="#F4F4F4" BorderThickness="0,1,0,1" Margin="10,10,10,10"/>
<Image HorizontalAlignment="Left" Margin="10,0,0,0" Height="38" Width="38" Source="C:\Users\linda_l\Pictures\Cloud upload\database (1).png" />
<TextBlock FontSize="50" Foreground="#4092C2" Margin="60,0,0,0" HorizontalAlignment="left" Height="69" >Databases</TextBlock>
</Grid>
<Grid Background="White" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Border BorderBrush="#BBBDBF" BorderThickness="0,0,0,1" Grid.Column="1" />
<Label Grid.Column="1" Content="Server Name" VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />
<Border BorderBrush="#BBBDBF" BorderThickness="1,0,0,1" Grid.Column="2" />
<Label Grid.Column="2" Content="Source Database" VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />
<Border BorderBrush="#BBBDBF" BorderThickness="1,0,0,1" Grid.Column="3" />
<Label Grid.Column="3" Content="Destination Database" VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />
<Border BorderBrush="#BBBDBF" BorderThickness="1,0,0,1" Grid.Column="4" />
<Label Grid.Column="4" Content="Status" VerticalAlignment="Bottom" FontWeight="Bold" Foreground="#4092C2" />
</Grid>
<ItemsControl x:Name="itemscntrl" ItemsSource="{Binding DatabaseServers}" Background="White" BorderBrush="WhiteSmoke" BorderThickness="0" Grid.Row="2" Margin="0,5,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="grd" Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="10" />
</Grid.ColumnDefinitions>
<Image Source="{Binding StatusImage}" Height="10" Width="10" />
<Label Grid.Column="1" HorizontalAlignment="Left" Content="{Binding ServerName}" />
<Label Grid.Column="2" HorizontalAlignment="Left" Content="{Binding SourceDatabase}" />
<TextBox x:Name="dst" Grid.Column="3" Text="{Binding DestinationDatabase , Mode=TwoWay, UpdateSourceTrigger=LostFocus}" VerticalAlignment="Top" />
<Label Grid.Column="4" Content="{Binding Status}" VerticalAlignment="Top" />
<Button Grid.Column="4" BorderThickness="0" HorizontalAlignment="Center" Width="50" Margin="3" Content="{Binding Status}" Command="{Binding EnabledCommand}" CommandParameter="{Binding}" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding selected }" Value="True">
<Setter Property="Background" Value="Yellow" TargetName="dst" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Which currently looks like this:
I tried adding a DataTemplate.Triggers but it doesn't seam to do anything. How exactly do you detect that a row in a itemscontrol has been selected? The only examples I have found use a datagrid. I tried changing mine to a datagrid instead of the itemscontrol, but then the it wouldn't load the data.
Datagrid:
<DataGrid x:Name="grd" Background="White" DataContext="{Binding DatabaseServers}" Grid.Row="2">
<Image Source="{Binding StatusImage}" Height="10" Width="10" />
<Label Grid.Column="1" HorizontalAlignment="Left" Content="{Binding ServerName}" />
<Label Grid.Column="2" HorizontalAlignment="Left" Content="{Binding SourceDatabase}" />
<TextBox x:Name="dst" Grid.Column="3" Text="{Binding DestinationDatabase , Mode=TwoWay, UpdateSourceTrigger=LostFocus}" VerticalAlignment="Top" />
<Label Grid.Column="4" Content="{Binding Status}" VerticalAlignment="Top" />
<Button Grid.Column="4" BorderThickness="0" HorizontalAlignment="Center" Width="50" Margin="3" Content="{Binding Status}" Command="{Binding EnabledCommand}" CommandParameter="{Binding}" />
</DataGrid>
Just shows a bunch of lines there is no data in each row.
I am very new to WPF so I cant really figure out what I am doing wrong here.

Here is what you want using DataGrid i m using MVVM
Window.xaml
<Grid Margin="10">
<StackPanel Orientation="Vertical">
<Label Content="DataBases" Width="150" Height="50" HorizontalAlignment="Left" FontSize="20"/>
<DataGrid Name="DgDataSource" AutoGenerateColumns="False" CanUserAddRows="False" ItemsSource="{Binding SourceData}">
<DataGrid.Columns>
<DataGridTextColumn Header="ServerName" Binding="{Binding ServerName}" Width="2*"/>
<DataGridTextColumn Header="SourceDatabase" Binding="{Binding SourceDatabase}" Width="2*"/>
<DataGridTextColumn Header="DestinationDatabase" Binding="{Binding DestinationDatabase}" Width="2*"/>
<DataGridTemplateColumn Width="*" Header="Status" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="{Binding Status}" Command="{Binding EnabledCommand}"></Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</Grid>
View Model
public class WindowViewModel
{
public ObservableCollection<DataSource> SourceData { get; set; }
public WindowViewModel()
{
Initialize();
}
private void Initialize()
{
SourceData = new ObservableCollection<DataSource>
{
new DataSource() {Status = "Stop", ServerName = "Test 1", SourceDatabase = "Unknown",DestinationDatabase = "blabla....."},
new DataSource() {Status = "Work", ServerName = "Test 2", SourceDatabase = "Unknown",DestinationDatabase = "blabla....."},
new DataSource() {Status = "Stop", ServerName = "Test 3", SourceDatabase = "Unknown",DestinationDatabase = "blabla....."}
};
}
}
Model
public class DataSource
{
public string Status { get; set; }
public string ServerName { get; set; }
public string SourceDatabase { get; set; }
public string DestinationDatabase { get; set; }
}

How to add ListView with datatemplate to Button Flyout in windows store app 8.1 c#

I have a requirement like when I click on Button Flyout should come with the list of dynamic data and specified template. Below is the code in Xaml. But the Flyout is not Loading with any data.
<Button Content="Folders" >
<FlyoutBase.AttachedFlyout>
<Flyout >
<ListView x:Name="lstEmailFolder" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Image Source="/Images/Favorite_icon.png" Height="30" Width="30" Grid.Column="1" />
<TextBlock Text="{StaticResource Foldername}" Width="30" Height="30" Foreground="White" FontSize="20"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</FlyoutBase.AttachedFlyout>
</Button>

You havent bind Itemsource property to Listview and instead of Text="{StaticResource Foldername}" use Text="{Binding Foldername}"
xaml
<Button Content="Display Flyout">
<Button.Flyout>
<Flyout>
<ListView x:Name="lstEmailFolder" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Foldername}" Width="30" Height="30" Foreground="White" FontSize="20"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
c#
this.InitializeComponent();
List<FlyoutData> data = new List<FlyoutData>();
data.Add(new FlyoutData("Folder1"));
data.Add(new FlyoutData("Folder2"));
lstEmailFolder.ItemsSource = data;
public class FlyoutData
{
public string Foldername { get; set; }
public FlyoutData(string Foldername)
{
this.Foldername = Foldername;
}
}