I want to make a user control that contains Image control and I want to bind its source with a url of image. How to do this in the user control XAMl and CS code and how to use this user control and bind its dependency property ?
You could have the Image control like this, which you could bind the source to it:
<Image Width="75" Height="75" Source="{Binding thumbUrl}" Stretch="Fill"/>
For more you could refer these:
Image databinding XAML, Silverlight, C#, Windows Phone 7.1
http://www.geekchamp.com/tips/data-binding-images-in-windows-phone
Hope it helps!
You can create a user control by,
(i)Right click the project tile in Solution Explorer and then select Add->New Item
(ii)Select Windows Phone User Control from the pop up windows, set the name that you want to use
(iii)Add the following code inside the XAML part of the user control
<StackPanel x:Name="LayoutRoot" >
<TextBlock Text="My User Control" FontSize="34"/>
<Image x:Name="Image1" Source="{Binding ImageUrl}" />
</StackPanel>
Define a property in your Model,
public Uri ImageUrl { get; set; }
and bind it to your Image
Uri uri = new Uri("http://Abundantcode.com/image.jpg", UriKind.Absolute)
Image1.Source = new BitmapImage(uri);
Now you can use UserControl anywhere you want,
<local:MyUserControl x:Name="myUserControl" />
Related
i have a image control in wpf like this
<Image x:Name="Img" Source="{Binding IsAsync=True}" />
i set the image by fetching from a url like this
Img.DataContext = ImageUrl;
it shows fine and when i want to clear it i just use
Img.DataContext=null;
for the same control i have a browse button as well to select the image from local path like this
BitmapImage image = new BitmapImage(new Uri(path));
Img.Source=image;
now i want to clear that as well so i do
Img.Source=null;
after that the control wont show the image from url only local images can be opened
Edit: probably i need to set the binding again after making source to null, not sure how to do that
You are abusing bindings horribly. Please stop.
<Image x:Name="Img" Source="{Binding IsAsync=True}" />
Says "Bind to the data context", which isn't all that great. Bind to a property of your view model, something like:
<Image x:Name="Img" Source="{Binding Path=ImageLocation, IsAsync=True}" />
And then only ever change the image using ImageLocation. At the very least, only set it via the DataContext.
Once you set the source to a binding, you should never be changing it via code-behind. Period. Do that, and your problem will "magically" disappear, as you are doing it the right way now.
To clear image control, clear image url.
e.g imgControlName.ImageUrl = "";
Currently I've got a single window and several user controls in a WPF application. My objective is to load them in the XAML via a binding to a property in the View Model. I've been looking for a way to do this for some time now, but most solutions hinge on using the code-behind instead of the View Model. Is there anyway to do this via a binding? Something like:
<StackPanel Height="500" HorizontalAlignment="Left" Margin="0,46,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="500" Content="{Binding SomeUserControl}" />
And in the code:
private Control _someUserControl;
public Control SomeUserControl
{
get { return _someUserControl; }
set { _someUserControl = value; }
}
You can use a ContentPresenter instead of the StackPanel, since there is only a single element:
<ContentPresenter Height="500" HorizontalAlignment="Left" Margin="0,46,0,0" VerticalAlignment="Top" Width="500" Content="{Binding SomeUserControl}" />
I'll try to explain my problem clearly.
I have a working code in WinForms that has a Board (PictureBox) that shows an image thats generated from a list of users controls (win-forms) by the function UserControl.BitmapCopy() for each user control.
This process begins with a blank image (Graphic type), and for each user control I draw it in a specific location with the function BitmapCopy() of the user control.
The result is an image that looks like a real form (with buttons,labels,etc.), but it’s just an image.
Then I show this image in a picture Box.
Now I need to implement this code in WPF, but I can’t generate an image of each user control with BitmapCopy().
I found this code that does it, so now I can generate a bitmap for each user control, but I don’t know what is the best way to create the Big Board that eventually shows a bitmap that has all the user controls images inside it, in different locations.
I would appreciate any help.
This is the equivalent in WPF:
<Window x:Class="MiscSamples.VisualBrush"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="VisualBrush" Height="300" Width="300" x:Name="Window">
<StackPanel>
<TextBlock Text="Hi, Im a Window!"/>
<TextBox Text="This is a TextBox"/>
<Slider Width="200"/>
</StackPanel>
<Window.ToolTip>
<ToolTip DataContext="{Binding PlacementTarget, RelativeSource={RelativeSource Self}}">
<Grid Height="400" Width="400">
<Grid.Background>
<VisualBrush Visual="{Binding}"/>
</Grid.Background>
</Grid>
</ToolTip>
</Window.ToolTip>
</Window>
The Window's ToolTip consists of a grid painted with VisualBrush whose Visual is the Window itself. It looks like this:
As you can see, Exactly 0 lines of C# code are required to achieve the same in WPF.
I've set the XamDataTree image, but I don't want to copy the image folder to my debug folder every time. Instead I want to add the image to my project resources and use it from there. Currently no image is shown because it expects a path to an image where I give it an actual bitmap. The Icon property in the TreeNode is set in another part of the code.
This is my Xaml code:
<ig:XamDataTree
Grid.Row="1"
Name="MyTree"
ScrollViewer.CanContentScroll="True"
ItemsSource="{Binding ComparedContents}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
>
<ig:XamDataTree.CheckBoxSettings>
<ig:CheckBoxSettings CheckBoxVisibility="Visible" />
</ig:XamDataTree.CheckBoxSettings>
<ig:XamDataTree.CollapsedIconTemplate>
<DataTemplate>
<Image Source="{Binding Path=Icon}"/>
</DataTemplate>
</ig:XamDataTree.CollapsedIconTemplate>
<ig:XamDataTree.ExpandedIconTemplate>
<DataTemplate>
<Image Source="{Binding Path=Icon}"/>
</DataTemplate>
</ig:XamDataTree.ExpandedIconTemplate>
<ig:XamDataTree.GlobalNodeLayouts>
<ig:NodeLayout
Key="Children"
DisplayMemberPath="Text"
TargetTypeName="Model.TreeNode"
>
</ig:NodeLayout>
</ig:XamDataTree.GlobalNodeLayouts>
</ig:XamDataTree>
This is my model, each Property has a private store for the value and fires an event if it changes.
public class TreeNode : INotifyPropertyChanged
{
public Label Text;
public System.Drawing.Image Icon;
public ObservableCollection<TreeNode> Children;
}
Assuming you embedded the image into your application, you can use a pack uri to load the image into the node template. Instead of using an Image type on your Icon property you should use Uri and set it equal to something like this:
Icon = new Uri("pack://application:,,,/Resources/Images/icon.png");
You need to modify the binding in your templates a bit because the DataContext of this template is going to be a XamDataTreeNodeDataContext. This object has a Data property which will be your TreeNode object. Your binding should be updated to:
<Image Source="{Binding Path=Data.Icon}"/>
I have a little question.
I have a data template like that :
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="DangersItemTemplate">
<Grid Height="102" Width="447" Tap="Grid_Tap">
<Image Name="image" Source="{Binding Image}" HorizontalAlignment="Left" Width="90" />
<TextBlock Name="text" Text="{Binding Nom}" TextWrapping="Wrap" Margin="102,16,16,22"/>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I want to use the Textlock control in the CSharp code to pass the Text property to the second xaml page, but I can't find the name of the control, it's inaccessible.
Any idea ?
Your binding the Text of the TextBlock so you must have the value in your datacontext. I'd add this value to the Querystirng and navigate to the page.
var text = ((Whatever) DataContext).Nom;
string page2Uri = string.Foramt("/PAge2.xaml?Nom={0}", text);
NavigationService.Navigate(new Uri(page2Uri, UriKind.Relative));
And then to get the data out of the querystring you can use the OnNavigatedTo method in your page, and then inspect this.NavigationContext.QueryString["nom"]
Or have a look into something like the MVVM pattern.
I just use VB.Net but I am sure you can convert.
Just use any shared variable in the application.
Here you can see it in an SourceCode example:
http://www.activevb.de/rubriken/kolumne/kol_30/res/nachtscanner.zip
Just use Public Shared MyText As String
in Application Class. This vairable you can access anywhere.
You can also use INotifyPropertyChanged for that shared property to bind.
Alternatively you can use Navigation Query. Read more here:
How can I pass query string variables with NavigationService.Navigate?