Using binding inside Xamarin XAML Extension - c#

I'm trying to bind EmbeddedImages to a ListView so I can show a different icon depending on the item of the list. Using Working with Images tutorial I've managed to make a extension to show the embedded images, but only if i hard code the location to the icon.
So this works:
<Image Source="{local:ImageResource (namespace).icon.png}"/>
but I can't bind to the icon I want. I've tried all these and none worked:
<Image Source="{local:ImageResource {Binding _iconLocation}}" />
<Image Source="{Binding Source=local:ImageResource, Path=_iconLocation}"/>

If you want to use binding you don't need to use markup extension. Extension is done "Because there is no built-in type converter from string to ResourceImageSource".
In your model define
public ImageSource MyImageSource
{
get
{ //here you decide what resource to use
return ImageSource.FromResource("(namespace).icon.png");
}
}
Then in xaml use
<Image Source="{Binding MyImageSource}" />
And you don't need any extension classes

Related

Xamarin RadioButton.Content not showing correct content

I'm trying to set an image inside a RadioButton like shown at https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton
<RadioButton>
<RadioButton.Content>
<Image Source="icon.png"/>
</RadioButton.Content>
</RadioButton>
But in app it shows only the text "Xamarin.Forms.Image" instead of the image.
What is wrong? I just did it like in the example.
Please read the docs
However, on some platforms a RadioButton can display a View,
and
On Android, RadioButton objects will display a string-based representation of the View object that's been set as content:

Image.FromFile not loading into design time view c#.net

I am currently trying to get an image to show in design time in my Xaml with the code below:
Xaml:
<Canvas Grid.ColumnSpan="2" Margin="0,0,0,0">
<Image Canvas.ZIndex="1" Source="{Binding Coupon.OverlayImage}" Margin="0,-21,-76,108" Stretch="Fill" x:Name="PrintImageContextMenu" />
</Canvas>
C# Design Time:
Coupon.OverlayImage = Image.FromFile(#"C:\Temp\Images\TestImage.png");
Original Property of OverlayImage in VB (Legacy Code):
private _overlayImage as Image
Public Property OverlayImage As Image
Get
Return _overlayImage
End Get
Set
_overlayImage = value
NotifyPropertyChanged("OverlayImage")
End Set
End Property
Upon first view I cannot see anything wrong with but it does not show, even at runtime. Any ideas would be appreciated.
You can use Image Fallback value to set the default image.Here is a simple example.
<Window.Resources>
<BitmapImage x:Key="ImageSource" UriSource="C:\Temp\Images\TestImage.png"/>
</Window.Resources>
<Grid>
<Image
HorizontalAlignment="Left"
Source="{Binding SourceImage,FallbackValue={StaticResource ImageSource}}"/>
</Grid>
Everywhere you use the Image class, I think you use the System.Drawing.Image because the WPF Image control does not have a FromFile() method . You cannot use it as a source for the WPF Image Control. You must instead try using an IValueConverter to convert the Image to a BitmapSource/ImageSource.
Try this,
var uri = new Uri(Coupon.OverlayImage);
var bitmap = new BitmapImage(uri);
ImageName.Source = bitmap;

WPF Using Image Control to dynamically view Online images

Situation
I'm trying to use an image control in my program that accesses an online image by binding it to a property.
XAML:
<Image Source="{Binding TheImage}" x:Name="imgPic" HorizontalAlignment="Left" Height="113" Margin="14,89,0,0" VerticalAlignment="Top" Width="120"/>
Specifically, I'm binding to the return value of the searchMembers method (which returns an object) mempic contains a URL, and this mempic will change depending on which member is currently logged in.
View Model:
public Uri TheImage
{
get
{
return new Uri(hillracing.searchMembers(Username).mempic);
}
}
Problem
Neither this code, or a static link to the image actually works.
Here is the test image I'm actually using
wondered if anyone could tell em what I was doing wrong.
thanks.
The WPF Image control is more sophisticated than you imagine... just use the string URI value as the Image.Source directly like this:
<Image Source="http://i.imgur.com/aIf7B0P.jpg" />
Or, if you want to data bind, do this:
<Image Source="{Binding TheImage}" ... />
...
public string TheImage
{
get { return "http://i.imgur.com/aIf7B0P.jpg"; }
}

How to get an icon in stackPanel in a XAML file

I am new to XAML and C#
I have an icon created already in a project and and I have to use this icon whenever I select one of the option from the dropdown menu.
I made a stackpanel in XAML file
<StackPanel Name="stackPanelforIcon">
</StackPanel>
In the code behind file I have different cases for the dropdown menu.
case IconOnSelect:
?????? = IconList.NewIcon;
This NewIcon is the one already created and I am using the source also for this
using IconProject.Iconlists;
On writing IconList.NewIcon I am not getting any error, it is referenced correctly.
What should I write at ?????? to reference it. Is there any other way apart from using stackPanel to include an icon
A StackPanel cannot show an icon on it's own. You need a control for it, for example an Image.
<StackPanel Name="stackPanelforIcon">
<Image x:Name=theImage" />
</StackPanel>
Then you can use your Icon in your code behind like this:
this.theImage.Source = IconList.NewIcon;
You may need to convert your value, you never said what type it actually is.
Please note that using code-behind is not the preferred way with WPF. Using MVVM is way easier and more natural working with WPF, using code-behind you will fight WPF all the way. Using MVVM, this could be:
<StackPanel Name="stackPanelforIcon">
<Image Source="{Binding CurrentImage}" />
</StackPanel>
with your ViewModel having a property called CurrentImage that you would set when you want to change it. Don't forget to implement INotifyPropertyChanged for the changes to take effect though.

Changing Property of a Style Dynamically

I'm working on a WPF application. I have a Resource Dictionary in which I wrote custom Styles for the ToolTip and for the Button. Actually, for the button i've made two styles.
One of them, has included an image to appear to the left of the content in the buttoon.
<Style x:Key="ButtonImageStyle" TargetType="{x:Type Button}">
........
<TextBlock Margin="5.25,2.417,5.583,5.25" Foreground = White />
<Image x:Name="ButtonImage" Source="/MyProject;component/Images/icoMainMenu01.png" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-100,0,0,0" Width="16" Height="16"/>
.... </Style
Now, in the MainWindow.xaml i have the following:
<Button Style="{DynamicResource ButtonImageStyle}" x:Name="JustButton" Click="JustButton_Click" Height="50" ToolTip="Press for 1" Content="1" Margin="310,282,400,238" />
I want to be able to change that Image. I will have like 8 buttons and I want each button to have a different image associated with it.
Do you guys have any idea ?
Thanks!
There are various options, from (ab)using properties like the Tag to subclassing or composition in a UserControl, you could also create an attached property.
The cleanest would probably be subclassing though, then you can create a new dependency property for the ImageSource to be used which you then can bind in the default template using a TemplateBinding.
To do the subclassing you can use VS, from the new items choose Custom Control (WPF), this should create a class file and add a base-style to a themes resource dictionary which usually is found in Themes/Generic.xaml. The class would just look like this:
//<Usings>
namespace Test.Controls
{
public class ImageButton : Button
{
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new UIPropertyMetadata(null));
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
}
}
Now the theme would be more complicated, you can just copy one of the default templates for a button and paste it into the the default style. Then you only need to add your image somewhere but with this binding:
<Image Source="{TemplateBinding Image}" .../>
When you use this control you will then no longer need to reference a style, as everything is in the default style, there is now a property for the image:
<controls:ImageButton Content="Lorem Ipsum"
Image="Img.png"/>
(To use the Tag you would just stick with the normal button and use a TemplateBinding to the tag and set the Tag of the buttons to the URL)
I forgot to mention another possiblity which uses dynamic resources, it's a bit verbose but very simple, see this answer of mine for an example.

Categories