We Keep Coding

Converting FrameworkElement to Jpeg in UWP - c#

At the past, I can convert and save an usercontrol to an JPEG image with this code:
private string CreateBitmapImage(FrameworkElement usefulData, string name) // Tekli görev kartını masaüstünde oluşturmak için, resim yaratma fonksiyonu.
{
try
{
string fullFileName = string.Empty;
Size size = new Size(642, 416);
usefulData.Measure(size);
usefulData.Arrange(new Rect(size));
var rtb = new RenderTargetBitmap((int)usefulData.ActualWidth, (int)usefulData.ActualHeight, 96, 96, PixelFormats.Pbgra32);
rtb.Render(usefulData);
var encoder = new JpegBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(rtb));
SaveFileDialog dlg = new SaveFileDialog();
dlg.Title = "Görev kartını nereye kaydetmek istersiniz ?";
dlg.FileName = name; // Default file name
dlg.DefaultExt = ".jpg"; // Default file extension
dlg.Filter = "Resim Dosyası (.jpg)|*.jpg"; // Filter files by extension
dlg.OverwritePrompt = true;
var result = dlg.ShowDialog();
if (result == true && dlg.CheckPathExists == true)
{
fullFileName = System.IO.Path.Combine(dlg.FileName);
using (var filestream = new FileStream(fullFileName, FileMode.Create))
{
encoder.Save(filestream);
}
}
return fullFileName;
}
catch
{
MessageBox.Show("Tek görev kartını yaratırken bir hata oluştu.Lütfen yeniden deneyin.", "Hata", MessageBoxButton.OK, MessageBoxImage.Error);
return "";
}
}
Now, I'm converting my WPF project to UWP. However, I cannot find how I convert and save an usercontrol to an Jpeg image in UWP. Can you help me please ?
Thanks.
Update: My UserControl in UWP. As I explained at bottom, I got an exception if I try render the user control:
<UserControl
x:Class="AYOS_IDPrinter_UWP.TaskCard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AYOS_IDPrinter_UWP"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="416"
d:DesignWidth="642" HorizontalAlignment="Center" VerticalAlignment="Center" RequestedTheme="Default">
<UserControl.Resources>
<SolidColorBrush x:Key="AuSupportColor" Color="#FFE5C97C"/>
</UserControl.Resources>
<Border x:Name="OutSketch" BorderThickness="2" BorderBrush="{StaticResource AuSupportColor}">
<Grid x:Name="MainGrid" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="NeedleArea" BorderThickness="0,0,0,2" Background="{StaticResource AUColor}" BorderBrush="{StaticResource AuSupportColor}">
<TextBlock x:Name="Label" TextWrapping="Wrap" Text="İğne Alanı / Needle Area" Foreground="White" TextAlignment="Center" Margin="0" VerticalAlignment="Center" FontFamily="Noto Sans" FontWeight="Normal"/>
</Border>
<Grid x:Name="Values" HorizontalAlignment="Stretch" Margin="10,10,10,10" VerticalAlignment="Stretch" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="Header" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="128"/>
<ColumnDefinition/>
<ColumnDefinition Width="128"/>
</Grid.ColumnDefinitions>
<Image x:Name="Logo1" Source="Images/AULogo.png" Margin="0" Grid.RowSpan="4" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100"/>
<Image x:Name="Logo2" Source="Images/AnkudemLogo.png" Margin="0" Grid.RowSpan="4" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="100"/>
<TextBlock x:Name="Header_1" Grid.Column="1" Margin="0" TextWrapping="Wrap" Text="AYÖS" FontSize="28" TextAlignment="Center" FontWeight="Bold" Foreground="#FF284985" FontFamily="Noto Sans"/>
<TextBlock x:Name="Header_2" Grid.Column="1" Margin="0" TextWrapping="Wrap" Text="SINAV GÖREV KARTI" FontSize="24" TextAlignment="Center" Grid.Row="1" Foreground="#FF284985" FontFamily="Noto Sans"/>
<TextBlock x:Name="Header_3" Grid.Column="1" Margin="0" TextWrapping="Wrap" Text="EXAMINATION TASK CARD" FontSize="24" TextAlignment="Center" Grid.Row="2" Foreground="#FF284985" FontFamily="Noto Sans"/>
<TextBlock x:Name="DateText" Grid.Column="1" Margin="0" TextWrapping="Wrap" FontSize="22" TextAlignment="Center" Grid.Row="3" Foreground="#FF284985" Text="28 Mayıs 2016 – May 28, 2016" FontFamily="Noto Sans"/>
</Grid>
<Grid x:Name="Data" Grid.Row="1" Margin="0,18,0,-17">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="NameText" Margin="0,10,0,0" TextWrapping="Wrap" FontSize="32" TextAlignment="Center" Foreground="Red" Text="BERK BABADOĞAN" FontWeight="Bold" FontFamily="Noto Sans"/>
<TextBlock x:Name="TaskText" Margin="0,0,0,10" TextWrapping="Wrap" Text="Salon Başkanı" FontSize="28" TextAlignment="Center" Foreground="Black" Grid.Row="1" FontFamily="Noto Sans"/>
</Grid>
<Grid x:Name="Specs" Margin="10" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="SpecsH_1" Margin="0,0,5,0" TextWrapping="Wrap" Text="Sınav Yeri / Exam Area: " FontSize="20" Foreground="#FF343434" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="SpecsH_2" Margin="0,0,5,0" TextWrapping="Wrap" Text="Salon Adı / Hall Name:" FontSize="20" Foreground="#FF343434" Grid.Row="1" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="SpecsH_3" Margin="0,0,5,0" TextWrapping="Wrap" Text="Salon No / Hall Number:" FontSize="20" Foreground="#FF343434" Grid.Row="2" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="AreaText" Margin="5,0,0,0" TextWrapping="Wrap" Text="İstanbul" FontSize="20" Foreground="#FF343434" FontStyle="Italic" Grid.Column="1" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="HallNameText" Margin="5,0,0,0" TextWrapping="Wrap" Text="A Blok 3. Kat Derslik 316" FontSize="20" Foreground="#FF343434" Grid.Row="1" FontStyle="Italic" Grid.Column="1" VerticalAlignment="Center" FontFamily="Noto Sans"/>
<TextBlock x:Name="HallNoText" Margin="5,0,0,0" TextWrapping="Wrap" Text="340111" FontSize="20" Foreground="#FF343434" Grid.Row="2" FontStyle="Italic" Grid.Column="1" VerticalAlignment="Center" FontFamily="Noto Sans"/>
</Grid>
</Grid>
</Grid>
</Border>
It is the code how I create an instance from my user control:
var item = new TaskCard(Name_TextBox.Text.ToUpper() + " " + Surname_TextBox.Text.ToUpper(), Task_TextBox.Text, ExamArea_TextBox.Text, HallName_TextBox.Text,HallNumber_TextBox.Text,DateConverter.Get(Date_Picker.Date.ToString())); // Creating card.
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(item); // Gives error here.
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();

For converting, UWP app also has RenderTargetBitmap class for capturing a UIElement as an image source. For file saving, you could reference this turtorial. In UWP app we have FileSavePicker which is similar to SaveFileDialog. For example, a completed demo as follows:
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(elementToRender, 642,416);
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
var savePicker = new FileSavePicker();
savePicker.DefaultFileExtension = ".png";
savePicker.FileTypeChoices.Add(".png", new List<string> { ".png" });
savePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
savePicker.SuggestedFileName = "snapshot.png";
// Prompt the user to select a file
var saveFile = await savePicker.PickSaveFileAsync();
// Verify the user selected a file
if (saveFile == null)
return;
// Encode the image to the selected file on disk
using (var fileStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))
{
var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream);
encoder.SetPixelData(
BitmapPixelFormat.Bgra8,
BitmapAlphaMode.Ignore,
(uint)renderTargetBitmap.PixelWidth,
(uint)renderTargetBitmap.PixelHeight,
DisplayInformation.GetForCurrentView().LogicalDpi,
DisplayInformation.GetForCurrentView().LogicalDpi,
pixelBuffer.ToArray());
await encoder.FlushAsync();
}
More details you could reference the official XAML render to bitmap sample.
Update:
Also add the XAML code section which use a UserControl for testing. What pass to the RenderAsync method should be the name of the Element you want to render.
<local:MyUserControl
x:Name="elementToRender"
Width="100"
Height="150" />

I did some researches why I can't render a TargetBitmap from code. I found a reason at this link:
You cannot save visual element which in code (offscreen) to image.
So, I foluna a new way to render my code based user control. I created my user control via code like this:
//Initializing task card.
var item = new TaskCard(Name_TextBox.Text.ToUpper() + " " + Surname_TextBox.Text.ToUpper(), Task_TextBox.Text, ExamArea_TextBox.Text, HallName_TextBox.Text, HallNumber_TextBox.Text, DateConverter.Get(Date_Picker.Date.ToString())); // Creating card.
After this, I added a custom popup-like element with this:
<Border x:Name="RingBorder" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="{ThemeResource SystemControlBackgroundBaseHighRevealBorderBrush}" BorderThickness="2,2,2,2" RequestedTheme="Default" Visibility="Collapsed" >
<Grid x:Name="InnerGrid_Ring" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RequestedTheme="Default" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid x:Name="WaiterRing_SecondRow" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="LoadValue_Ring" Text="Lütfen bekleyin..." TextWrapping="Wrap" FontWeight="Normal" Margin="10,0,10,0" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.Column="1" Style="{StaticResource TitleTextBlockStyle}" />
<ProgressRing x:Name="Waiter_Ring" HorizontalAlignment="Center" Margin="10,10,10,10" VerticalAlignment="Center" Foreground="{StaticResource AndroidGreen}" IsActive="True" Width="40" Height="40"/>
</Grid>
<Grid x:Name="CardViewerGrid_Ring" HorizontalAlignment="Center" Height="416" Margin="0,0,0,0" VerticalAlignment="Center" Width="642"/>
</Grid>
</Border>
Lastly, I'm rendering the user control like this:
//Converting UIelement to Rendered Bitmap
CardViewerGrid_Ring.Children.Add(item); // Adding card to canvas.
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(CardViewerGrid_Ring); // Render canvas.
var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
And, voila :)

Related

I'm creating a WPF program for editing PowerPoint presentation using Syncfusion library but whenever I run the program I see the memory increase when navigating from a page to another. I'm using WPF Application with a window that navigates between multiple pages.
How to encounter this problem actually?
Thank you.
These photos show where the leak is located :
PS: Please focus on the InitializeNonUITasks method in home.cs because that's where the leak is.
Home Page XAML:
<Page x:Class="ProjectSABX.Pages.Home"
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:ProjectSABX.Pages"
xmlns:syncfusion="clr-namespace:Syncfusion.Windows;assembly=Syncfusion.Shared.Wpf"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
Width="1175" Height="660" KeyDown="Window_KeyDown"
Title="Home">
<Grid ShowGridLines="False" Margin="2,-2,-2,2">
<Grid Grid.Row="0" ShowGridLines="False">
<Grid.Background>
<SolidColorBrush Color="White" Opacity="0.5" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="2.5*"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Height="52" Grid.Row="0" VerticalAlignment="Top" Fill="#FF80A20D"></Rectangle>
<TextBlock Name="titleBarTextBlock" Text="Aperçu" Height="40" Foreground="White" FontFamily="Segoe UI" FontWeight="Normal" Padding="15" FontSize="17.75" VerticalAlignment="Top" Grid.Row="0" HorizontalAlignment="Center"></TextBlock>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 15 10 0" Grid.Column="3" Grid.Row="0">
</StackPanel>
<Image Source="/Images/ViewerIcons/ppt__logo for header.png" Grid.Column="0" HorizontalAlignment="Left" Margin="15" VerticalAlignment="Top" Height="30"></Image>
</Grid>
<Grid Grid.Row="1" ShowGridLines="False">
<Grid.RowDefinitions>
<RowDefinition Height="0*" />
<RowDefinition Height="445*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="59*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<Border ClipToBounds="True" BorderBrush="Black" BorderThickness=".7" Grid.Row="1" Grid.Column="0" Grid.RowSpan ="3" Margin="0,51,3,0">
<ScrollViewer Name="scrollViewer" Focusable="False" CanContentScroll="False" BorderBrush="Black" BorderThickness="1" HorizontalScrollBarVisibility="Auto" Grid.Row="1" Grid.Column="0" Grid.RowSpan ="3">
<Grid ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="9*" />
</Grid.ColumnDefinitions>
<StackPanel Name="stackpanel" Grid.Column="1" Width="170" />
</Grid>
</ScrollViewer>
</Border>
<Image Name ="centerSlideImage" Grid.Row="1" Grid.Column="1" Margin="0,57,5,19" />
<Canvas Name="loadingIndicatorCanvas" Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Margin="-250,-100,0,0">
<Canvas Canvas.Left="21.75" Canvas.Top="14" Height="81.302" Width="80.197">
<Canvas.Resources>
<Style TargetType="Ellipse">
<Setter Property="Width" Value="5" />
<Setter Property="Height" Value="5" />
<Setter Property="Fill" Value="#FF9BD226" />
</Style>
</Canvas.Resources>
<Ellipse x:Name="_00" Canvas.Left="24.75" Canvas.Top="50" />
<Ellipse x:Name="_01" Canvas.Top="36" Canvas.Left="29.5" />
<Ellipse x:Name="_02" Canvas.Left="43.5" Canvas.Top="29.75" />
<Ellipse x:Name="_03" Canvas.Left="57.75" Canvas.Top="35.75" />
<Ellipse x:Name="_04" Canvas.Left="63.5" Canvas.Top="49.75" />
<Ellipse x:Name="_05" Canvas.Left="57.75" Canvas.Top="63.5" />
<Ellipse x:Name="_06" Canvas.Left="43.75" Canvas.Top="68.75" />
<Ellipse x:Name="_07" Canvas.Top="63.25" Canvas.Left="30" />
<Ellipse Stroke="{x:Null}" Width="39.5" Height="39.5" Canvas.Left="31.75" Canvas.Top="37" Fill="{x:Null}" />
</Canvas>
</Canvas>
<Grid Grid.Row="3" Grid.Column="1" ShowGridLines="False" Margin="0, -10">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="20*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="42*" />
<ColumnDefinition Width="45*" />
<ColumnDefinition Width="44*" />
<ColumnDefinition Width="45*" />
<ColumnDefinition Width="238*" />
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="40*" />
<ColumnDefinition Width="46*" />
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="45*" />
</Grid.ColumnDefinitions>
<Image Name="openDocument" Grid.Row="1" Grid.Column="1" Height="30" Width="30" Source="/Images/ViewerIcons/ppt__open.png" MouseDown="openDocument_MouseDown" MouseEnter="openDocument_MouseEnter" MouseLeave="openDocument_MouseLeave" Margin="0,5,7,4"></Image>
<Image Name="createPdfDocument" Grid.Row="1" Grid.Column="3" Height="30" Width="30" Source="/Images/ViewerIcons/ppt_pdf.png" MouseDown="createPdfDocument_MouseDown" MouseEnter="createPdfDocument_MouseEnter" MouseLeave="createPdfDocument_MouseLeave" Margin="0,5,8,4"></Image>
<DockPanel Grid.Row="1" Grid.Column="6" Grid.ColumnSpan="3">
<Image Name="prevDocument" Height="30" Width="30" Source="/Images/ViewerIcons/ppt__back.png" MouseDown="prevDocument_MouseDown" MouseEnter="prevDocument_MouseEnter" MouseLeave="prevDocument_MouseLeave"></Image>
<Label Name="lblPageDisplay" Height="30" MinWidth="30" FontFamily="Segoe UI" FontWeight="Bold" FontSize="18" VerticalAlignment="Center" VerticalContentAlignment="Center" Padding="35,0,0,0" Foreground="#646464" />
<Image Name="NextDocumentIconImage" Height="30" Width="30" Source="/Images/ViewerIcons/ppt__for.png" MouseDown="NextDocument_MouseDown" MouseEnter="NextDocument_MouseEnter" MouseLeave="NextDocument_MouseLeave" Margin="-10,0"></Image>
</DockPanel>
</Grid>
</Grid>
</Grid>
Home Page C#:
public Home()
{
InitializeComponent();
pdfBackroundWorker.DoWork += pdfBackroundWorker_DoWork;
pdfBackroundWorker.RunWorkerCompleted += pdfBackroundWorker_RunWorkerCompleted;
this.Background = new SolidColorBrush(Color.FromRgb(244, 244, 244));
filePath = "/Data/Template.pptx";
InitializeNonUITasks();
InitializeUITasks(filePath);
}
private void openDocument_MouseDown(object sender, MouseButtonEventArgs e)
{
Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
dlg.Filter = "PowerPoint Presentations|*.pptx";
Nullable<bool> result = dlg.ShowDialog();
if (result == true)
{
string filename = dlg.FileName;
filePath = filename;
slideNumber = 1;
displayBackroundWorker.RunWorkerAsync();
}
}
private void InitializeNonUITasks()
{
try
{
presentation = Presentation.Open(filePath);
}
catch (Exception exp)
{
MessageBox.Show("This PowerPoint Presentation cannot be opened properly, please contact support");
return;
}
slideImageSources.Clear();
thumbnailImageSource.Clear();
printImages.Clear();
currentSlideNumber = 0;
presentation.ChartToImageConverter = new ChartToImageConverter();
presentation.ChartToImageConverter.ScalingMode = Syncfusion.OfficeChart.ScalingMode.Best;
try
{
foreach (ISlide slide in presentation.Slides)
{
using (System.Drawing.Image image = slide.ConvertToImage(Syncfusion.Drawing.ImageType.Bitmap))
{
System.Drawing.Image.GetThumbnailImageAbort myCallback = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
printImages.Add(image.Clone() as System.Drawing.Image);
System.Drawing.Image newImage = image.GetThumbnailImage(170, 100, myCallback, System.IntPtr.Zero);
using (Stream ms = new MemoryStream())
{
newImage.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
var decoder = BitmapDecoder.Create(ms, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnLoad);
thumbnailImageSource.Add(decoder.Frames[0]);
}
using (Stream ms = new MemoryStream())
{
image.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
var decoder = BitmapDecoder.Create(ms, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnLoad);
slideImageSources.Add(decoder.Frames[0]);
}
}
}
}
catch (Exception)
{
MessageBox.Show("This PowerPoint Presentation cannot be converted to images properly, please contact support");
return;
}
}
MainWindow XAML:
<Frame Grid.Column="1" Grid.Row="1" NavigationUIVisibility="Hidden" x:Name="Main" Source="./Pages/Home.xaml">
<Frame.Background>
<SolidColorBrush Color="#FFB0B0B0" Opacity="0.49" />
</Frame.Background>
</Frame>
MainWindow.cs:
public partial class MainWindow : Window
{
public MainWindow()
{
DataContext = this;
InitializeComponent();
}
private void ButtonClickHomePage(object sender, RoutedEventArgs e)
{
Main.Content = new Home();
}
}
Edit1: I tried to use the dispose() method for each object that implemented IDisposable, When navigating at first, the memory process decreases. then when I navigate from page to page it increases again.

It is hard to pinpoint the issue like this, but I do have some suggestions:
Usually it's about calling Dispose on all objects that implement the IDisposable interface.
check all object for the IDisposable interface and call Dispose() if it's available. E.g.: newImage.Dispose() (or use using)
Also, all the disposable objects in the lists printImages, thumbnailImageSource etc, should be disposed as well.
Also, I believe the decoder should be disposed as well, as well as the presentation, although I can be mistaken.
This will give you a good starting point - there might be more, but you should rule out and fix this first.
The loop is a likely suspect to be causing the memory increase.
Here's more info on IDisposable. Also, if you have implemented the IDisposable interface yourself - it's prety common to make a mistake with that as well. In that case you should double check it.

I'm creating a small numeric keyboard like those on our smartphones, when I press a key, the digit must be written in a TextBox.
This is where I have a problem, I can not update my TextBox when I press a button.
My window is decomposed into two frames of the same width, the keyboard is on the left frame and the TextBox on the right frame.
I call a method in my Clavier.xaml.cs page:
CallSection EtablissementAppel = new CallSection();
private void UpdateTextBox(string _UpdatePrefix, string _UpdateNumeroDestinataire)
{
EtablissementAppel.UpdateEtablissementAppel(_UpdatePrefix, _UpdateNumeroDestinataire);
}
Method in the CallSection.xaml.cs file:
public void UpdateEtablissementAppel(string p, string n)
{
string Numero = p + n;
EtablissementAppel.Text = Numero;
}
Code CallSection.xaml :
<TextBox x:Name="EtablissementAppel" Margin="5,5,5,5" PlaceholderText="ETABLISSEMENT D'APPEL" VerticalAlignment="Center" Grid.Column="0" Grid.ColumnSpan="2" Height="37"/>
Yet the TextBox does not want to update itself. Knowing that I can change its text anywhere in the file CallSection.xaml.cs but not in this method.
EDIT :
To give more details in relation to the first comments.
Method in CallSection.xaml.cs with a Debug.WriteLine() :
public void UpdateEtablissementAppel(string p, string n)
{
string Numero = p + n;
Debug.WriteLine(Numero);
EtablissementAppel.Text = Numero;
}
Here I can see in the debugger all my numbers tapped. But textbox doesn't update.
Debugger output :
12255
122552
1225525
12255255
122552555
CallSection.xaml :
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhonieMartha"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Custom="using:Microsoft.UI.Xaml.Controls"
x:Class="PhonieMartha.CallSection"
mc:Ignorable="d" Loaded="Page_Loaded"
>
<Page.Resources>
<SolidColorBrush x:Key="GraySelected" Color="#FFA3A3A3"/>
<SolidColorBrush x:Key="GrayUnselected" Color="#33000000"/>
</Page.Resources>
<Page.Background>
<ThemeResource ResourceKey="ApplicationPageBackgroundThemeBrush"/>
</Page.Background>
<Grid x:Name="GrillePrincipale">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox x:Name="EtablissementAppel" Margin="5,5,5,5" PlaceholderText="ETABLISSEMENT D'APPEL" VerticalAlignment="Center" Grid.Column="0" Grid.ColumnSpan="2" Height="37"/>
<Rectangle x:Name="Call1" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="1" Grid.Column="0" Tapped="Call1_Tapped"/>
<Rectangle x:Name="Call2" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="1" Grid.Column="1" Tapped="Call2_Tapped"/>
<Rectangle x:Name="Call3" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="2" Grid.Column="0" Tapped="Call3_Tapped"/>
<Rectangle x:Name="Call4" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="2" Grid.Column="1" Tapped="Call4_Tapped"/>
<Rectangle x:Name="Call5" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="3" Grid.Column="0" Tapped="Call5_Tapped"/>
<Rectangle x:Name="Call6" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="3" Grid.Column="1" Tapped="Call6_Tapped"/>
<Rectangle x:Name="Call7" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="4" Grid.Column="0" Tapped="Call7_Tapped"/>
<Rectangle x:Name="Call8" HorizontalAlignment="Stretch" Margin="5,5,5,5" VerticalAlignment="Stretch" Fill="#33000000" FocusVisualPrimaryBrush="#FFE03535" Grid.Row="4" Grid.Column="1" Tapped="Call8_Tapped"/>
<TextBox x:Name="RenvoiAppel" Margin="5,5,5,5" PlaceholderText="RENVOI D'APPEL" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="2" Height="37" Grid.Row="5" InputScope="Number"/>
<TextBox x:Name="MessageRecu" Margin="5,5,5,5" Text="" VerticalAlignment="Stretch" Grid.Column="2" Grid.Row="4" Grid.ColumnSpan="2"/>
<ToggleSwitch x:Name="ToggleSwitchRenvoiAppel" Margin="5,5,5,5" OnContent="On" OffContent="Off" Grid.Column="2" Grid.Row="5" HorizontalAlignment="Center" Toggled="ToggleSwitchRenvoiAppel_Toggled"/>
<TextBlock Grid.Column="3" Margin="5,5,5,5" Grid.Row="5" Text="PhonieMartha Rev1.0" TextWrapping="Wrap" VerticalAlignment="Stretch" TextAlignment="Center" FontSize="12"/>
</Grid>
</Page>
Here is the XAML code of the MainPage that contains the two frames :
<Page
x:Class="PhonieMartha.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PhonieMartha"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="GrilleMainPage">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame x:Name="CallsSection" Grid.Column="1"/>
<NavigationView x:Name="NavView" SelectionChanged="NavView_SelectionChanged" IsBackButtonVisible="Collapsed" PaneDisplayMode="Auto" CompactModeThresholdWidth="300" ExpandedModeThresholdWidth="550" Grid.Column="0">
<NavigationView.MenuItems>
<NavigationViewItem Icon="PhoneBook" Content="Annuaire général" Tag="AnnuaireGeneral"/>
<NavigationViewItem Icon="PhoneBook" Content="Annuaire personnel" Tag="AnnuairePersonnel"/>
<NavigationViewItem Content="Clavier" Tag="Clavier">
<NavigationViewItem.Icon>
<FontIcon Glyph="" FontFamily="Segoe MDL2 Assets"/>
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem Content="Mode conférence" Tag="Conference">
<NavigationViewItem.Icon>
<FontIcon Glyph="" FontFamily="Segoe MDL2 Assets"/>
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem Icon="Help" Content="Aide" Tag="Aide"/>
<NavigationViewItem Icon="Admin" Content="Mode instructeur" Tag="Instructeur"/>
</NavigationView.MenuItems>
<Frame x:Name="ContentFrame"/>
</NavigationView>
</Grid>
</Page>

You are creating a new instance of CallSection and then call the UpdateEtablissementAppel method of this one. This will obviously not affect the instance that you see on the screen. You need to get a reference to the existing instance and call its UpdateEtablissementAppel method.
You could use the following helper method to get a reference to the parent MainPage:
private static T FindParent<T>(DependencyObject dependencyObject) where T : DependencyObject
{
var parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null) return null;
var parentT = parent as T;
return parentT ?? FindParent<T>(parent);
}
And then cast the Content of the "CallsSection" Frame:
private void UpdateTextBox(string _UpdatePrefix, string _UpdateNumeroDestinataire)
{
MainPage mainPage = FindParent<MainPage>(this);
if (mainPage != null)
{
CallSection cellSection = mainPage.CallsSection.Content as CallSection;
if (cellSection != null)
cellSection.UpdateEtablissementAppel(_UpdatePrefix, _UpdateNumeroDestinataire);
}
}
You also need to make the Frame accessible from other classes. You can do this returning a reference to it from a public property of MainPage.xaml.cs, or by using the x:FieldModifier attribute directly in the XAML markup:
<Frame x:Name="CallsSection" x:FieldModifier="public" Grid.Column="1"/>

I have json as below:
I want to display the data in the gallery on the gridview, then if the user clicks the image on the gridview, it will show a picture with a larger size on the flipview according to the selected image. I'm having trouble, that is when the image on the gridview is selected, it always shows up the image on the flipview for the first index (not in accordance with the picture chosen by the user).
XAML:
<callisto:CustomDialog x:FieldModifier="public" x:Name="ArticleDetail"
Grid.Row="0" Grid.RowSpan="2" Title=""
Background="White" BackButtonVisibility="Collapsed" BorderBrush="White" >
<ScrollViewer Margin="0,0,5,5" Background="{x:Null}" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Disabled">
<StackPanel Height="auto">
<ProgressRing x:Name="articleDetailLoading" HorizontalAlignment="Center" VerticalAlignment="Center" Height="50" Width="50" />
<StackPanel x:Name="articleDetailBox" Margin="0,0,10,10" Height="auto">
<Grid x:Name="articleDetailGrid" BorderBrush="#FF990000" BorderThickness="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock x:Name="articleIdDetail" Grid.Row="0" Text="{Binding ID}" Visibility="Collapsed"/>
<AppBarButton x:Name="closeArticleBtn" Icon="Clear" HorizontalAlignment="Right" Foreground="Black" Click="closeArticleBtn_Click"/>
<ScrollViewer x:Name="articleTitleScroll" Grid.Row="1" Margin="10,0,0,0" Width="650" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" VerticalScrollBarVisibility="Auto" Background="{x:Null}" HorizontalScrollMode="Disabled">
<TextBlock x:Name="articleTitleDetail" Margin="0,0,15,15" FontSize="18" FontFamily="Segoe UI Black" FontWeight="SemiBold" TextWrapping="Wrap" Height="auto" TextAlignment="Center"/>
</ScrollViewer>
<TextBlock x:Name="articleDateDetail" Grid.Row="3" Margin="10,15,10,0" FontSize="15" FontFamily="Segoe UI Black" FontWeight="SemiLight" TextWrapping="Wrap" Height="auto" TextAlignment="Center"/>
<GridView x:Name="articleImageGridView" Grid.Row="5" Margin="10,25,10,0" Height="110" AutomationProperties.AutomationId="ItemDetailScrollViewer" DataContext="{Binding SelectedItem, ElementName=itemListView}"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto" IsItemClickEnabled="True"
ScrollViewer.ZoomMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" ItemClick="articleImageGridView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="90" Width="120" Margin="5,0,0,0" Background="{x:Null}" BorderBrush="#FF646464" BorderThickness="0.5">
<Border x:Name="coverBox" Grid.Row="0" Margin="0,0,0,0" Width="120" Height="90" VerticalAlignment="Top" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="0.5">
<Border.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="images/IP-placeholder.png"/>
</Border.Background>
<Image x:Name="cover" Source="{Binding ImageURL1}" HorizontalAlignment="Center" Stretch="Uniform" AutomationProperties.Name="{Binding Title}" ImageOpened="Image_ImageOpened" Loaded="cover_Loaded" Loading="cover_Loading"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
<WebView x:Name="articleContentDetail" Grid.Row="6" Margin="10,15,10,10" Width="650" Height="150" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</Grid>
</StackPanel>
<StackPanel x:Name="articleFullImageDetailBox" Margin="0,0,10,10" Height="auto" Visibility="Collapsed">
<Grid x:Name="articleFullImageDetailGrid" BorderBrush="#FF990000" BorderThickness="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<AppBarButton x:Name="closearticleFullImageBtn" Grid.Column="1" Icon="Clear" HorizontalAlignment="Right" Foreground="Black" Click="closearticleFullImageBtn_Click"/>
<TextBlock x:Name="articleFullIdDetail" Grid.Row="0" Text="{Binding ID}" Visibility="Collapsed"/>
<FlipView x:Name="articleImageFullFlipview" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Margin="0,0,0,0" ItemsSource="{Binding gallery.Items}" SelectedItem="{Binding gallery, Mode=TwoWay}" Width="650" Height="500" VerticalAlignment="Center" HorizontalAlignment="Left" BorderBrush="Black" BorderThickness="1" Background="{x:Null}">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid x:Name="content" Margin="0,0,0,0">
<Border x:Name="coverBox" Width="600" Height="500">
<Border.Background>
<ImageBrush Stretch="Uniform" ImageSource="images/IP-placeholder.png"/>
</Border.Background>
<Image x:Name="cover" Source="{Binding ImageURLFull}" HorizontalAlignment="Center" Stretch="UniformToFill" AutomationProperties.Name="{Binding ID}" ImageOpened="Image_ImageOpened" Loaded="cover_Loaded" Loading="cover_Loading"/>
</Border>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
</StackPanel>
</StackPanel>
</ScrollViewer>
</callisto:CustomDialog>
Code:
ObservableCollection<ArticleClass> articleDatasourceDetailImage = new ObservableCollection<ArticleClass>();
articleDatasourceDetailImage.Clear();
articleDetailLoading.Visibility = Visibility.Visible;
articleDetailLoading.IsActive = true;
articleDetailBox.Visibility = Visibility.Collapsed;
articleFullImageDetailBox.Visibility = Visibility.Collapsed;
ArticleDetail.IsOpen = true;
articleItemDetail = e.ClickedItem as ArticleClass;
articleIdDetail.Text = articleItemDetail.ID.ToString();
ConnectionProfile connections = NetworkInformation.GetInternetConnectionProfile();
if (connections != null && connections.GetNetworkConnectivityLevel() == NetworkConnectivityLevel.InternetAccess)
{
articleDetailLoading.IsActive = true;
try
{
string urlPath = "http://indonesia-product.com/api/v1/articles/"10.json?module=articles&page=1&token=3f63-dc43-c8d5-eb45-8cbf-b72d-9d98-800f";
//Debug.WriteLine(urlPath.ToString());
var httpClient = new HttpClient(new HttpClientHandler());
var values = new List<KeyValuePair<string, string>>
{
};
HttpResponseMessage response = await httpClient.GetAsync(urlPath);
response.EnsureSuccessStatusCode();
if (!response.IsSuccessStatusCode)
{
articleDetailLoading.IsActive = false;
RequestException();
}
string jsonText = await response.Content.ReadAsStringAsync();
JsonObject jsonObject = JsonObject.Parse(jsonText);
JsonObject jsonData = jsonObject["data"].GetObject();
JsonObject groupObject1 = jsonData.GetObject();
double id = groupObject1["id"].GetNumber();
string title = groupObject1["title"].GetString();
string date = groupObject1["publication_date"].GetString();
JsonArray jsonGallery = groupObject1["gallery"].GetArray();
foreach (JsonValue groupValue1 in jsonGallery)
{
JsonObject groupObject2 = groupValue1.GetObject();
string imageUrl = groupObject2.ContainsKey("image_url") && groupObject2["image_url"] != null ? groupObject2["image_url"].GetString() : string.Empty;
ArticleClass fileImage = new ArticleClass();
fileImage.ImageURL1 = imageUrl;
articleDatasourceDetailImage.Add(fileImage);
}
articleImageGridView.ItemsSource = articleDatasourceDetailImage;
articleDetailLoading.IsActive = false;
ArticleClass file = new ArticleClass();
file.ID = Convert.ToInt32(id);
file.Title = title;
DateTime dateConvert = Convert.ToDateTime(date);
file.Date = dateConvert.ToString("MMM d, yyyy");
articleContentDetail.NavigateToString(contentText);
articleDetailLoading.IsActive = false;
articleDetailBox.Visibility = Visibility.Visible;
articleDetailLoading.Visibility = Visibility.Collapsed;
articleDetailLoading.IsActive = false;
}
catch (HttpRequestException ex)
{
articleDetailLoading.IsActive = false;
}
}
else
{
articleDetailLoading.IsActive = false;
}
}
private async void articleImageGridView_ItemClick(object sender, ItemClickEventArgs e)
{
articleDetailLoading.Visibility = Visibility.Visible;
articleDetailLoading.IsActive = true;
articleDetailBox.Visibility = Visibility.Collapsed;
articleFullImageDetailBox.Visibility = Visibility.Collapsed;
var articleImageGridView = (GridView)sender;
articleImageFullFlipview.SelectedIndex = articleImageGridView.SelectedIndex;
articleFullImageDetailBox.Visibility = Visibility.Visible;
articleDetailLoading.Visibility = Visibility.Collapsed;
articleDetailLoading.IsActive = false;
}
How to handle it?

First, there is no need to get your data again when clicking on the item. When you load your data, set the ItemsSource of your GridView and your FlipView to be the same collection.
Second, when your item is clicked, get the SelectedIndex of the item and then set the SelectedIndex of your FlipView
private async Task LoadData()
{
// get data
var response = await httpClient.GetAsync(url);
// Convert to your objects
articleImageFullFlipview.ItemsSource = data;
articleImageGridView.ItemsSource = data;
}
private void articleImageGridView_ItemClick(object sender, ItemClickEventArgs e)
{
var gridView = (GridView)sender;
articleImageFullFlipview.SelectedIndex = gridView.SelectedIndex;
// show or hide any controls
}

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..

My problem is that my items won't add to the list. I try to add 3 texts and one image location to the list. I try everything but I couldn't do it.
XAML code
<ListBox Name="mylistbox" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Grid.RowSpan="3">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="s1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="100"/>
<RowDefinition Height="30"/>
<RowDefinition Height="20/"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding naslov}" Tag="{Binding broj}" FontSize="32" Foreground="White" HorizontalAlignment="Center" TextWrapping="Wrap" Grid.Row="1" Grid.Column="2" />
<TextBlock Text="{Binding datum}" Foreground="White" HorizontalAlignment="Right" VerticalAlignment="Center" TextWrapping="Wrap" Grid.Row="2" Grid.Column="2"/>
<Image Source="{Binding slika}" Grid.Row="1" Grid.Column="1" Grid.RowSpan="2"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
C# code
for (int i = 1; i < datum.Count; ++i)
{
podatak _podatak = new podatak();
_podatak.naslov = naslovi[i];
_podatak.datum = datum[i];
_podatak.broj = Convert.ToString(broj);
_podatak.slika = "http://hsin.hr/images/logo.gif";
mylistbox.Items.Add(_podatak);
}

I didn't test, but I think you are missing one detail, and doing a little mistake.
First: you need to bind a List to a ListBox. So, I believe you should do something like this:
List<podatak> myList = new List<podatak>();
for (int i = 1; i < datum.Count; ++i)
{
podatak _podatak = new podatak();
_podatak.naslov = naslovi[i];
_podatak.datum = datum[i];
_podatak.broj = Convert.ToString(broj);
_podatak.slika = "http://hsin.hr/images/logo.gif";
myList.Add(_podatak);
}
mylistbox.ItemsSource = myList;
And Second: add this on xaml:
<ListBox Name="mylistbox" ItemsSource="{Binding}" ...
Correcting:
As commented, doesn't need change anything on your XAML code.
My mistake.