Process Memory increase WPF application - c#
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.
Related
WPF bind TextBlock "text" in one user control to textbox in another UserControl Where both of them are hosted in a Frame inside mainWindow
SUMMARY OF THE PROBLEM:
I have main window which has a frame and a button, in the frame i'm going to show one user control at a time (i provided an image of my usercontrol).
in the first UserControl, i will write 4 player names (two for each team).
after i press the button and i go to next usercontrol i want to show the names of the players in textblock. I also want to bind IsChecked property of radio button in first UserControl to the second UserControl. (i have other buttons that show up in mainWindow depends on what usercontrol is in the Frame right Now)
WHAT I TRIED:
I tried binding the textbox property to the textblock in the second usercontrol but it doesnt show or i cant access it.
because i have the button in the mainWindow i tried saving the names in variable then pass it to next usercontrol but didnt work also.
Also tried alot of random online solution i found online but nothing worked.
i need a way to expose the property of First UserControl to be used in the Second UserControl
MY CODE
MainWindow xaml
<Grid SnapsToDevicePixels="True" x:Name="myGrid" >
<Grid.Background>
<ImageBrush x:Name="myBackground" ImageSource="background1.png" Stretch="UniformToFill"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height=" auto" />
<RowDefinition Height=" 20" />
</Grid.RowDefinitions>
<Frame x:Name="Main" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="5" NavigationUIVisibility="Hidden" >
</Frame>
<Button Style="{StaticResource StandardButton}" Visibility="Visible" x:Name="playersBtn" Grid.Column="2" Grid.Row ="2" Margin="100,40,100,40" FontSize="36" Content="إبدأ" FontFamily="Ara Hamah Homs" Padding="50,0" Background="#FFFFE900" Click="playerInfoBtn" BorderBrush="{x:Null}" Foreground="Black" >
</Button>
MainWindow c#
namespace Try3
{
public partial class MainWindow : Window
{
SoundPlayer MP = new SoundPlayer();
public MainWindow()
{
InitializeComponent();
MP.SoundLocation = "C:/Users/eadh2/Desktop/game tries/try3/try3/sound1.wav";
MP.PlayLooping();
}
private void playerInfoBtn(object sender, RoutedEventArgs e)
{
Main.Content = new PlayersInfoPage();
playersBtn.Visibility = Visibility.Hidden;
startBtn.Visibility = Visibility.Visible;
icon.Visibility = Visibility.Collapsed;
ImageBrush b = new ImageBrush();
b.ImageSource = new BitmapImage(new Uri("pack://application:,,,/background flat.png"));
myGrid.Background = b;
}
private void startBtn_Click(object sender, RoutedEventArgs e)
{
Main.Content = new gamePage();
startBtn.Visibility = Visibility.Collapsed;
gamePageBoarder.Visibility = Visibility.Visible;
}
private void startBtn_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
startBtn.Background = Brushes.DarkGreen;
}
}
}
First usercontrol xaml to enter player names (Image of First UserControl to enter player names)
<UserControl x:Class="Try3.PlayersInfoPage"
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:Try3"
mc:Ignorable="d"
d:DesignHeight="862.179" d:DesignWidth="1210.632" >
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="150" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width=" *" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="AUTO" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height=" *" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Text="بيانات الفريق الأحمر" FontSize="36" Margin="50,0,50,0" FontFamily="Ara Hamah Homs" />
<TextBox x:Name="redFirst" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="0,30,0,20" Padding="10" FontSize="36" HorizontalContentAlignment="Center" Text="اللاعب الأول" Foreground="#FF919191" GotMouseCapture="redFirst_GotMouseCapture" FontFamily="Ara Hamah Homs" />
<TextBox x:Name="redSecond" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Margin="0,30,0,110" Padding="10" FontSize="36" HorizontalContentAlignment="Center" Text="اللاعب الثاني" Foreground="#FF919191" GotMouseCapture="redSecond_GotMouseCapture1" FontFamily="Ara Hamah Homs" />
<TextBlock Grid.Column="4" Grid.Row="1" Grid.ColumnSpan="2" Text="بيانات الفريق الأخضر " FontSize="36" Margin="50,0,50,20" FontFamily="Ara Hamah Homs" />
<TextBox x:Name="greenFirst" Grid.Row="2" Grid.Column="4" Grid.ColumnSpan="2" Margin="0,30,0,20" Padding="10" FontSize="36" HorizontalContentAlignment="Center" Text="اللاعب الأول" Foreground="#FF919191" GotMouseCapture="greenFirst_GotMouseCapture2" FontFamily="Ara Hamah Homs" />
<TextBox x:Name="greenSecond" Grid.Row="3" Grid.Column="4" Grid.ColumnSpan="2" Margin="0,30,0,110" Padding="10" FontSize="36" HorizontalContentAlignment="Center" Text="اللاعب الثاني" Foreground="#FF919191" GotMouseCapture="greenSecond_GotMouseCapture3" FontFamily="Ara Hamah Homs" />
<Border x:Name="roundsBoarder" Grid.Column="3" Grid.Row="2" Grid.RowSpan="2" BorderThickness ="3" BorderBrush="Black" CornerRadius="0" Margin="20,50,20,130" MaxHeight="170" MaxWidth="350" VerticalAlignment="Center" Background="#99FFFFFF" MouseEnter="Border_MouseEnter" MouseLeave="roundsBoarder_MouseLeave">
<StackPanel HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" >
<Viewbox Height="40" Width="40" >
<RadioButton BorderBrush="#FFFFE900" VerticalContentAlignment="Center" HorizontalAlignment="Left" GroupName="roundsNumber" FontFamily="Ara Hamah Homs" FontSize="12"/>
</Viewbox>
<TextBlock Text="جولة" FontSize="42" Margin="20,0,0,0" FontFamily="Alnaqaaa R" />
</StackPanel>
<StackPanel Orientation="Horizontal" >
<Viewbox Height="40" Width="40" >
<RadioButton BorderBrush="#FFFFE900" VerticalContentAlignment="Center" HorizontalAlignment="Left" GroupName="roundsNumber" FontFamily="Ara Hamah Homs" FontSize="12"/>
</Viewbox>
<TextBlock Text="ثلاث جولات" FontSize="42" Margin="20,0,0,0" FontFamily="Alnaqaaa R" />
</StackPanel>
</StackPanel>
</Border>
</Grid>
First UserControl C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace Try3
{
public partial class PlayersInfoPage : UserControl
{
public PlayersInfoPage()
{
InitializeComponent();
}
private void redFirst_GotMouseCapture(object sender, MouseEventArgs e)
{
redFirst.Text = "";
redFirst.Foreground = Brushes.Black;
}
private void redSecond_GotMouseCapture1(object sender, MouseEventArgs e)
{
redSecond.Text = "";
redSecond.Foreground = Brushes.Black;
}
private void greenFirst_GotMouseCapture2(object sender, MouseEventArgs e)
{
greenFirst.Text = "";
greenFirst.Foreground = Brushes.Black;
}
private void greenSecond_GotMouseCapture3(object sender, MouseEventArgs e)
{
greenSecond.Text = "";
greenSecond.Foreground = Brushes.Black;
}
private void Save_MouseEnter(object sender, MouseEventArgs e)
{
}
private void Save_MouseLeave(object sender, MouseEventArgs e)
{
}
private void Border_MouseEnter(object sender, MouseEventArgs e)
{
roundsBoarder.Background = new SolidColorBrush(Colors.White) { Opacity = 1 };
roundsBoarder.CornerRadius = new CornerRadius(20);
}
private void roundsBoarder_MouseLeave(object sender, MouseEventArgs e)
{
roundsBoarder.Background = new SolidColorBrush(Colors.White) { Opacity = 0.6 };
roundsBoarder.CornerRadius = new CornerRadius(0);
}
}
}
Second UserControl xaml to show player names in each side
<UserControl x:Class="Try3.gamePage"
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:try3"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="50" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions >
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
<RowDefinition Height="50" />
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" >
<TextBlock HorizontalAlignment="Center" FontSize="36" FontFamily="Ara Hamah Homs" Text="الفريق الأحمر" />
<TextBlock x:Name="redFirstPlayer" FontSize="24" FontFamily="Ara Hamah Homs" Text="اللاعب الاول" HorizontalAlignment="Center"/>
<TextBlock x:Name="redSecondPlayer" FontSize="24" FontFamily="Ara Hamah Homs" Text="اللاعب الثاني" HorizontalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="6" Grid.ColumnSpan="2" Grid.Row="1">
<TextBlock FontSize="36" FontFamily="Ara Hamah Homs" Text="الفريق الأخضر" HorizontalAlignment="Center" Margin="0,0,0,20"/>
<TextBlock x:Name="greenFirstPlayer" FontSize="24" FontFamily="Ara Hamah Homs" Text="اللاعب الاول" HorizontalAlignment="Center"/>
<TextBlock x:Name="greenSecondPlayer" FontSize="24" FontFamily="Ara Hamah Homs" Text="اللاعب الثاني" HorizontalAlignment="Center"/>
</StackPanel>
<TextBlock x:Name="redScore" Grid.Column="1" Grid.Row="3" FontSize="42" FontFamily="Ara Hamah Homs" Text="0" HorizontalAlignment="center" />
<Image Source="trophy (1).png" Grid.Column="2" Grid.Row="3" HorizontalAlignment="Left"/>
<TextBlock x:Name="greenScore" Grid.Column="7" Grid.Row="3" FontSize="42" FontFamily="Ara Hamah Homs" HorizontalAlignment="center" Text="0" />
<Image Source="trophy (1).png" Grid.Column="6" Grid.Row="3" HorizontalAlignment="Right"/>
<StackPanel Grid.Row="1" Grid.Column="6" Grid.ColumnSpan="2" Margin="0,50,0,0" >
</StackPanel>
</Grid>
WPF sliders to change button colors on click
I am doing a project where I have to change button colors based on sliders in WPF. This is my XAML design.
XAML file
So, I have made 64 buttons, and I have tried implementing multiple options, and none worked for me.
I have this xaml code:
<Grid Grid.Column="0" Grid.RowSpan="4" Grid.ColumnSpan="4" HorizontalAlignment="Left" Height="790" Margin="0,10,0,0" Grid.Row="0" VerticalAlignment="Top" Width="800">
<Grid Margin="230,114,230,346" AutomationProperties.Name="ledMatrix" Tag="ledMatrix" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED00" Click="changeLedIndicatiorColor" x:Name="LEDButton"/>
<Button Grid.Column="1" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED01"/>
<Button Grid.Column="2" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED02"/>
<Button Grid.Column="3" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED03"/>
<Button Grid.Column="4" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED04"/>
<Button Grid.Column="5" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED05"/>
<Button Grid.Column="6" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED06"/>
<Button Grid.Column="7" Grid.Row="0" Height="40" Width="40" Command="{Binding LEDBtn}" Background="#FFAAAAAA" Tag="LED07"/>
and sliders:
<Grid Margin="230,480,230,170">
<Slider x:Name="SeekR" Margin="0,0,0,120" Tag="seekR" Maximum="255" Background="Red" ></Slider>
<Slider x:Name="SeekG" Margin="0,50,0,70" Tag="seekG" Maximum="255" Background="Green"></Slider>
<Slider x:Name="SeekB" Margin="0,100,0,20" Tag="seekB" Maximum="255" Background="Blue"></Slider>
</Grid>
I have tried placing this in my xaml.cs file :
public void changeColor()
{
byte rr = (byte)SeekR.Value;
byte gg = (byte)SeekG.Value;
byte bb = (byte)SeekB.Value;
Color cc = Color.FromRgb(rr, gg, bb); //Create object of Color class.
SolidColorBrush colorBrush = new SolidColorBrush(cc); //Creating object of SolidColorBruch class.
LEDButton.Background = colorBrush; //Setting background of stack panel.
}
private void changeLedIndicatiorColor(object sender, RoutedEventArgs e)
{
changeColor();
}
But from this code, I have to name all the buttons differently butI want to have the same binding for all buttons and try to connect it all together, so for example I would like to set color by sliders and when I click the button color would change. Then, I can change the color, and make other buttons that different color.
Refactor ChangeColor to accept a Button, the button to change the color for:
private void ChangeLedIndicatiorColor_OnClick(object sender, RoutedEventArgs e)
{
ChangeColor(sender as Button);
}
public void ChangeColor(Button button)
{
byte rr = (byte)SeekR.Value;
byte gg = (byte)SeekG.Value;
byte bb = (byte)SeekB.Value;
Color cc = Color.FromRgb(rr, gg, bb);
SolidColorBrush colorBrush = new SolidColorBrush(cc);
button.Background = colorBrush;
}
Then register the ChangeLedIndicatiorColor event handler for each Button.Click:
...
<Button Click="ChangeLedIndicatiorColor" />
<Button Click="ChangeLedIndicatiorColor" />
<Button Click="ChangeLedIndicatiorColor" />
...
You can use the EventSetter so that the event can be applicable to all the buttons. You don't need to attach the click event handler to each button anymore.
<Window.Resources>
<Style TargetType="Button">
<EventSetter Event="Click" Handler="ChangeLedIndicatiorColor"/>
</Style>
</Window.Resources>
And inside event handler you can change the color of the button which triggered the click event.
private void changeLedIndicatiorColor(object sender, RoutedEventArgs e)
{
byte rr = (byte)SeekR.Value;
byte gg = (byte)SeekG.Value;
byte bb = (byte)SeekB.Value;
Color cc = Color.FromRgb(rr, gg, bb);
SolidColorBrush colorBrush = new SolidColorBrush(cc);
(sender as Button).Background = colorBrush;
}
Passing image selection from child window to MainPage
I'm working on a UWP FTP front-end application. I've created a UserControl that mimics the form of a standard Windows desktop icon (consisting of a StackPanel containing an Image and a TextBlock) which is to be used as a way of displaying saved favorites. What I'd like is for the user to be able to select any image to be used as the icon for each favorite, but have run into some pretty significant issue with getting this to work, I believe due to the Windows 10 "no access to filesystem" restriction--I haven't figured out that part yet.
As a temporary substitution, I came up with the idea of having a set of icons for the user to select from, all stored within the Assets folder of the application. I've created an IconSelector page/child window (IconSelector.xaml) that pops up when appropriate, allowing the user to select from 8 different Images.
The issue I'm running into is getting the selected Image back to the parent window (MainPage.xaml). I thought of just passing an int from child to parent, and then use that int with an enum to indicate the correct image, but I can't figure out how to pass any parameter at all between child and parent.
I did find this question on SO, but it's for Silverlighbt and doesn't seem to work in UWP (unless I implemented it incorrectly).
Does anybody have any idea on how to accomplish this? Code (relevant portions) pasted below:
MainPage XAML
<Canvas Grid.Column="1" Grid.Row="0" Grid.RowSpan="5" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="Assets\Red.png" Canvas.ZIndex="200" />
<Border x:Name="addFtpGrid" Visibility="Visible" Canvas.Left="300" Canvas.Top="300" Width="600" Height="350" BorderBrush="{ThemeResource SystemControlBackgroundAccentRevealBorderBrush}" BorderThickness="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.5*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Link name" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Address" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Username" Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Password" Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBlock Text="Confirm Password" Grid.Column="0" Grid.Row="4" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="5,0" />
<TextBox x:Name="linkNameEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="0" Margin="5,0" />
<TextBox x:Name="addressEntry" Text="ftp://" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" Margin="5,0" />
<TextBox x:Name="usernameEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="2" Margin="5,0" />
<PasswordBox x:Name="passwordEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="3" Margin="5,0">
</PasswordBox>
<PasswordBox x:Name="confirmPasswordEntry" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="1" Grid.Row="4" Margin="5,0" LostFocus="ConfirmPasswordEntry_LostFocus" />
<Viewbox Grid.Column="2" Grid.Row="0" Grid.RowSpan="4" Margin="5,15,5,0">
<Image x:Name="imageEntry" Source="Assets/SquircleX.png" Tapped="ImageEntry_TappedAsync" />
</Viewbox>
<TextBlock Text="Click image to change" Grid.Column="2" Grid.Row="4" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Button x:Name="saveNewFtpLink" Click="SaveNewFtpLink_Click" Content="Save Changes" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,10"/>
</Grid>
</Border>
</Canvas>
MainPage C#
private async void ImageEntry_TappedAsync(object sender, TappedRoutedEventArgs e)
{
IconSelector selector = new IconSelector();
selector.Tapped += new TappedEventHandler(selector_Tapped);
ShowDialog(selector);
//List<string> fileTypes = new List<string> { ".jpg", ".jpeg", ".png", ".bmp", ".gif", ".tiff", ".ico" };
//FileOpenPicker picker = new FileOpenPicker();
//picker.ViewMode = PickerViewMode.Thumbnail;
//picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
//foreach (string type in fileTypes)
//{
// picker.FileTypeFilter.Add(type);
//}
//StorageFile file = await picker.PickSingleFileAsync();
//if(file != null)
//{
// imageEntry.Source = new BitmapImage(new Uri(file.Path));
// Image selectedImage = new Image();
// selectedImage.Source = imageEntry.Source;
// imageEntry = selectedImage;
// imageEntry.UpdateLayout();
// imageToken = StorageApplicationPermissions.FutureAccessList.Add(file);
//}
}
IconSelector XAML
<Page
x:Class="FtpSharp.IconSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FtpSharp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignHeight="175" d:DesignWidth="600"
Background="{ThemeResource ContentDialogBackgroundThemeBrush}">
<Page.Resources>
<Style x:Key="selectionStyle" TargetType="Border">
<Setter Property="CornerRadius" Value="10" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Margin" Value="10,10,5,5" />
<Setter Property="BorderThickness" Value="3" />
</Style>
</Page.Resources>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel x:Name="iconViewer" Orientation="Horizontal" Width="1100">
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpRed.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpOrange.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpYellow.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpGreen.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpBlue.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpPurple.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpPink.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
<Border Style="{StaticResource selectionStyle}">
<Image Source="Assets\FtpTeal.png" Margin="4" Height="96" Tapped="Image_Tapped" />
</Border>
</StackPanel>
</ScrollViewer>
<Button x:Name="commitSelection" Content="Save" Grid.Row="1" Foreground="Black" HorizontalAlignment="Center" Margin="0,10" />
</Grid>
IconSelector C#
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
namespace FtpSharp
{
public sealed partial class IconSelector : Page
{
private static readonly DependencyProperty SelectedIconProperty = DependencyProperty.Register("SelectedIcon", typeof(int),
typeof(IconSelector), new PropertyMetadata(0));
public int SelectedIcon
{
get { return (int)GetValue(SelectedIconProperty); }
set { SetValue(SelectedIconProperty, value); }
}
public IconSelector()
{
this.InitializeComponent();
}
private void Image_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
Image tappedImage = (Image)sender;
Border tappedBorder = (Border)tappedImage.Parent;
SolidColorBrush blue = new SolidColorBrush(Colors.Blue);
foreach (Border border in iconViewer.Children)
{
border.BorderBrush = new SolidColorBrush(Colors.Transparent);
}
tappedBorder.BorderBrush = new SolidColorBrush(Color.FromArgb(255,0,0,255));
}
}
In this case you can either provide the result as a public property of the IconSelector class, or as EventArgs of an event. You already have the SelectedIcon property there, so you can use it. To notify the MainPage that the selection has occurred, you need to add an event to IconSelector - for example DialogCompleted:
public event EventHandler<int> DialogCompleted;
You will trigger this event when the dialog is confirmed by the user:
DialogCompleted?.Invoke(this, SelectedIcon);
Then within MainPage, you need to subscribe to this event:
IconSelector selector = new IconSelector();
selector.DialogCompleted += IconDialogCompleted;
ShowDialog(selector);
And now get the SelectedIcon inside the handler:
private void IconDialogCompleted(object sender, int selectedIcon)
{
//do something with selectedIcon
}
Converting FrameworkElement to Jpeg in UWP
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 :)
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..