I am trying to set up the image on a grid.
I used 2 ways to do it:
1) using image source:
<Image Source="{Binding MonitoringVM.ImgPath}"
Width="1600" Height="1600" />
When I do it this way, the image gets displayed. BUT it works only if the width/height is 500. When I set 2000 I can only see the small piece of the image. I expected it to enlarge the image and display me only the part which corresponds to the size of the grid which contains the image component, however it does not work.
2) For this approach I overwritten Canvas:
public class ImageCanvas : Canvas
{
public ImageSource CanvasImageSource
{
get { return (ImageSource)GetValue(CanvasImageSourceProperty); }
set { SetValue(CanvasImageSourceProperty, value); }
}
public static readonly DependencyProperty CanvasImageSourceProperty =
DependencyProperty.Register("CanvasImageSource", typeof(ImageSource),
typeof(ImageCanvas), new FrameworkPropertyMetadata(default(ImageSource)));
protected override void OnRender(System.Windows.Media.DrawingContext dc)
{
dc.DrawImage(CanvasImageSource, new Rect(this.RenderSize));
base.OnRender(dc);
}
}
BUT
I works fine (including size manipulation) only when I statically specify the path:
<helper:ImageCanvas CanvasImageSource="/Images/img1.png"
Width="500" Height="500" >
</helper:ImageCanvas>
And if I replace the path with the binding it does not displayme anything at all:
<helper:ImageCanvas CanvasImageSource="{Binding MonitoringVM.ImgPath}"
Width="500" Height="500" >
</helper:ImageCanvas>
The ViewModel is: ImgPath = #"/Images/img1.jpg";
Your ImageCanvas is redundant, because it behaves like an Image control with Stretch set to Fill.
So just write this:
<Image Source="{Binding MonitoringVM.ImgPath}" Stretch="Fill" Width="500" Height="500" />
Related
I am working on a UWP project with xaml and c#. I have a stackpanel of images on the right where you can click on the image and it will display a related larger image to the left of the stackpanel.
The large image is set initially to the "large" image that relates to the first "small" image in the stackpanel when you load the page but when you click any of the other small images in the stackpanel, the large image does not update.
The whole thing is a datatemplate that is placed inside a flyout. The relevant xaml for the "large" image is here:
<Border Background="White" Grid.Row="2">
<Image Stretch="Uniform">
<Image.Source>
<BitmapImage UriSource="{Binding SelectedImage}" />
</Image.Source>
</Image>
</Border>
When the small image is clicked, it triggers the "tapped" method for that image and that method is:
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
var img = ((Windows.UI.Xaml.Controls.Image)sender).DataContext as obj
img.FlyoutContent.SelectedImage = new Uri(img.relatedPath);
}
I am using the above code to set the image initially and it works. It just does not change the large image when the small one is clicked.
In debugging, when I click on the small image in the stackpanel, I break at the "image tapped" method and I can see that the uri is getting updated properly and there are no binding errors. The UI never changes.
What am I missing?
Thank you,
Zach
*Side note: the "obj" is just a made up name of a custom class.
For Binding properties you need to implement INotifyPropertyChangedclass so that the UI gets updated automatically.
class CustomClass : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _imageLink;
public string ImageLink
{
get
{
return _imageLink;
}
set
{
_imageLink = value;
RaisePropertyChanged();
}
}
private void RaisePropertyChanged([CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
Or as you are using a Tapped event, why not give your XAML element a x:name and set the source of the image of that name to your URi.
To update the ImageLink property, you need to create an instance of the CustomClass in the page you are changing the property.
CustomClass ab = new CustomClass();
ab.ImageLink = "code here";
I am trying to print a WPF visual (a Canvas to be exact) containing multiple images. The image sources are loaded from base64 strings that are converted to BitmapSources. When the canvas is shown in a Window the 2 images are displayed correctly, however when its printed using PrintVisual method of PrintDialog, the images both appear the same. I have created a scaled down example that exhibits the behavior that I am seeing.
Here is the XAML I'm using:
<Window x:Class="ImagePrintTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ImagePrintTest"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="600">
<StackPanel>
<Button Content="Print" Click="Button_Click" />
<Canvas x:Name="ImageCanvas">
<Image x:Name="ImageA" Canvas.Left="50" Canvas.Top="50" Width="380" Height="56" />
<Image x:Name="ImageB" Canvas.Left="50" Canvas.Top="150" Width="380" Height="56" />
</Canvas>
</StackPanel>
And this is the code behind:
public partial class MainWindow : Window
{
string ABC_DATA = #"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";
string DEF_DATA = #"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";
public MainWindow()
{
InitializeComponent();
ImageA.Source = Convert(ABC_DATA);
ImageB.Source = Convert(DEF_DATA);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
PrintDialog printDialog = new PrintDialog();
if (printDialog.ShowDialog() == true)
{
printDialog.PrintVisual(ImageCanvas, "image print test");
}
}
public static BitmapSource Convert(string s)
{
byte[] bytes;
bytes = System.Convert.FromBase64String(s);
BitmapSource source;
using (System.IO.MemoryStream ms = new System.IO.MemoryStream(bytes))
{
source = PngBitmapDecoder.Create(ms, BitmapCreateOptions.None, BitmapCacheOption.OnLoad).Frames[0];
}
return source;
}
}
I am assuming that the image sources are being cached somehow somewhere but I really cant explain this behavior. Can anyone explain what is happening here?
It works for me when I create a second BitmapFrame like this:
public static BitmapSource Convert(string s)
{
using (var ms = new MemoryStream(System.Convert.FromBase64String(s)))
{
return BitmapFrame.Create(
BitmapFrame.Create(ms, BitmapCreateOptions.None, BitmapCacheOption.OnLoad));
}
}
However, I don't have an explanation for this behaviour.
I also noticed that printing seems to spoil the layout. After printing, the ImageCanvas moves to position (0,0) in its StackPanel parent.
I have UserControl which I display like this, it's for previewing a receipt ticket before printing:
<ScrollViewer x:Name="xzScroll" Template="{StaticResource scrollView}" Height="488" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Border x:Name="xzPreview" BorderThickness="0" Background="White" Margin="0,0,10,0" Padding="15">
// The UserControl
</Border>
</ScrollViewer>
When the user wants to print the receipt, I remove the UserControl from its parent Border, and try to re-measure and re-arrange the control according to the printeable area:
public void Print()
{
PrintDialog dlg = new PrintDialog();
this.Measure(new Size(dlg.PrintableAreaWidth, double.PositiveInfinity));
this.Arrange(new Rect(this.DesiredSize));
this.UpdateLayout();
dlg.PrintTicket.PageMediaSize = new PageMediaSize(this.ActualWidth, this.ActualHeight);
....
}
However, the Height and Width properties won't change, resulting in a faulty print with messed up margins and some text clipping on the sides.
When I create a new instance of my UserControl in code, and then use the Measure and Arrange methods, I see the Width and Height properties change according to the PrinteableAreaWidth, resulting in a proper receipt ticket.
How can I make sure the Width and Height properties are properly getting set?
Is it right that you want to to resize the Usercontrol?
If yes, why don't create a Class (ViewModel) for the Usercontrol with the two Properties Height and Width and bind the User Control to these Properties.
Than you can change the size without removing the Usercontrol.
Here for Example how such a ViewModel could look like. You will need to implement the INotifyPropertyChanged.
public class UserControlViewModel:INotifyPropertyChanged
{
private double _height;
private double _width;
public double _height
{
get { return _height;}
set {
if(_height == value)
return;
_height = value;
OnPropertyChanged();
}
public double _width
{
get { return _width;}
set {
if(_width == value)
return;
_width = value;
OnPropertyChanged();
}
And in Xaml you can bind it this way.
<ScrollViewer x:Name="xzScroll" Template="{StaticResource scrollView}" Height="488" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Border x:Name="xzPreview" BorderThickness="0" Background="White" Margin="0,0,10,0" Padding="15">
<MyUserControl
DataContext = "{Binding MyControlViewModelObject}"
Height = "{Binding Height}"
Width = "{Binding Width}"/>
</Border>
</ScrollViewer>
It is possible that you have declared the UI elements in your UserControl with exact Margin and/or Height and Width dimensions... of course, I can't be sure about that because you didn't show us your relevant code.
However, if this is the case, then you won't be able to rearrange them by re-sizing the UserControl externally. The solution is to use Grid controls to organise your UI elements, so that they can be automatically re-sized when the UserControl is resized. See the Grid Class page on MSDN for further information.
I have a longListSelector that create several canvas dynamically and I want to draw in each canvas by using data from my ObservableCollection Games.
Here is my base code of the main page:
<Grid x:Name="ContentPanel">
<phone:LongListSelector Name="myLLS" ItemSource="{Binding GamesVM}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel>
<Canvas /> <!-- Here I want to draw -->
<TextBlock Text="{Binding Title}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
public class GameVM : INotifyPropertyChanged {
private string _title;
public string Title {
get { return this._title; }
set {
if (this._title!= value) {
this._title= value;
this.OnPropertyChanged("Title");
}
}
}
public void Draw() {
Ellispe stone = new Ellipse();
// [...] Add Fill, Strock, Width, Height properties and set Canvas.Left and Canvas.Top...
myCanvas.Children.Add(stone);
}
}
I would like to execute my Draw method when my GamesVM collection is generated but I haven't access to the corresponding canvas at this time. Putting my Draw method in code behind doesn't help because I have no event to handle where I could get both data binding object and the canvas newly generated (except if I miss something...). So I have no "myCanvas" instance in my Draw method.
I have some ideas to do that but nothing work well.
Option 1
I can put my UIElement (Ellipse, Line, etc) in an ObservableCollection which is binded in an ItemsControl like this :
<ItemsControl ItemsSource="{Binding myUIElements}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
public void Draw() {
myUIElements = new ObservableCollection<UIElement>();
Ellispe stone = new Ellipse();
// [...] Add Fill, Strock, Width, Height properties and set Canvas.Left and Canvas.Top...
myUIElements.Add(stone);
}
It works but when I leave the page and come back, I get an Element is already the child of another element exception.
If I use VisualTreeHelper to find my ItemsControl and call Items.Clear() on it, I get an exception too beacuse Items is read-only.
Option 2
I can use a ContentControl instead of ItemsControl and create the canvas in my Draw method:
<ContentControl Content="{Binding myUICanvas"/>
public void Draw() {
myUICanvas = new Canvas();
Ellispe stone = new Ellipse();
// [...] Add Fill, Strock, Width, Height properties and set Canvas.Left and Canvas.Top...
myUICanvas.Children.Add(stone);
}
It works too but when I leave the page and come back, I get a Value does not fall within the expected range exception.
I understand that I can't bind UIElement because I can't clear them when the Framework try to set them again. What is the trick to say "Please, do not add the same element twice" ?
Option 3
I can try to draw directly in XAML and bind a ViewModel object instead of UIElement object.
<ItemsControl ItemsSource="{Binding myDatas}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Width="{Binding Diameter}" Fill="Black" ...>
</Ellipse>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It could work in WPF but in my Windows Phone 8 app, I have no ItemContainerStyle property to set Canvas.Left and Canvas.Right. Beside I would have to use a CompositeCollection to deal with several kind of shapes but DataType is not recognized by Visual Studio.
Moreover, even if it works with Line UIElements, the render is slower than c# approach.
So, what is the best option and how to deal with my exceptions ?
For information, I give you which one I choose.
I take option 2 and avoid the come back error by redrawing a new Canvas each time. I change my Draw definition so it return me the new Canvas.
public class GameVM : INotifyPropertyChanged {
// Title and other properties
private Canvas _myUICanvas;
public Canvas myUICanvas
{
get {
_myUICanvas = Draw();
return _myUICanvas;
}
set {
// this is never called
_myUICanvas = value;
}
}
public Canvas Draw() {
Canvas newCanvas = new Canvas();
Ellispe stone = new Ellipse();
// [...] Add Fill, Strock, Width, Height properties and set Canvas.Left and Canvas.Top...
newCanvas.Children.Add(stone);
return newCanvas;
}
}
Like this, I can run my program without error and without reloading/recreating all the GameVM instances.
I am developing a screen, and this screen I have a grid. Within this grid, I have a UserControl WebBrowser. I'm using this component to display XML formatted and syntax is highlighted (with color). The text to be displayed is done via Binding, so that the component is a UserControl, as was done for the same modifications accepted Binding (since the original does not accept content via Binding). But I'm experiencing the following problem: when the user resizes the screen of the program at a certain point, the body of the WebBrowser beyond the boundaries of the grid, making the screen is strange at the bottom of the Grid.
I tested with other components, and this problem does not occur.
Behold my UserControl:
<UserControl x: Class = "Geraes.Library.Core.GUI.WPF.Controls.XmlBrowserControl"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
x: Name = "thisControl">
<Grid Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<WebBrowser Name="WebBrowser" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ Grid>
</ UserControl>
And here, how I use it:
<ct:XmlBrowserControl XmlDoc="{Binding ContentString}" Grid.Row="1" />
Again, I can't understand why this is happening, since other components works as well inside this grid.
Another thing: we're using WebBrowser because until this moment, it's the best component to show a XML formatted and with syntax-colour. But if you know another one than its better and easy to use, i'm accepting suggestions.
Any help is welcome.
Best regards,
Gustavo.
I was having a similar problem using the webbrowser control, in the end I switched to using awesomium and have found it much nicer to use.
I wanted to size the content of the webbrowser (or webcontrol) to fit content without scroll bars so I could use the scrollbars of the containing element (in my case a grid). I also started with a custom control but then switched to adding the the binding source as an attached property instead and setting the sizes and visibility once the content had loaded. I my case I was using you localing stored html string, but you could use a uri instead
using System;
using System.Windows;
using Awesomium.Windows.Controls;
using Awesomium.Core;
namespace utilities
{
public class WebBrowserHelper {
public static readonly DependencyProperty BodyProperty =
DependencyProperty.RegisterAttached("Body", typeof (string), typeof(WebBrowserHelper), new PropertyMetadata(OnBodyChanged));
public static string GetBody(DependencyObject dependencyObject) {
return (string) dependencyObject.GetValue(BodyProperty);
}
public static void SetBody(DependencyObject dependencyObject, string body) {
dependencyObject.SetValue(BodyProperty, body);
}
private static void ScrollDataReceivedDelegate(object sender, ScrollDataEventArgs e)
{
var webControl = (Awesomium.Windows.Controls.WebControl) sender;
webControl.Height = e.ScrollData.ContentHeight;
webControl.Width = e.ScrollData.ContentWidth;
webControl.Visibility = Visibility.Visible;
}
private static void OnBodyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
var webControl = (Awesomium.Windows.Controls.WebControl) d;
webControl.LoadHTML((string)e.NewValue);
webControl.ScrollDataReceived += new ScrollDataReceivedEventHandler(ScrollDataReceivedDelegate);
webControl.LoadCompleted += delegate {
webControl.RequestScrollData();
};
}
}
}
And the namespaces:
xmlns:utilities="clr-namespace:utilities;assembly=utilities"
xmlns:awesome="clr-namespace:Awesomium.Windows.Controls;assembly=Awesomium.Windows.Controls"
And the xaml:
<awesome:WebControl
HorizontalAlignment="Left"
Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualWidth}"
Height="1"
utilities:WebBrowserHelper.Body="{Binding html}"
Visibility="Collapsed" />