Fail to do binding to image - silverlight

i have simple class
public class A
{
public ImageSource imageSource
{
get;
set;
}
}
page class:
Public class page : Page
{
A a_class = new A();
}
And simple silverlight page that contain object type A.
In this page i have Image that i want to bind to imageSource of A.
So i wrote it and its not working.
<Image x:Name="Image_" Stretch="Fill"
Source="{Binding imageSource}" DataContext="{StaticResource a_class }"/>
How i need to write it so it will work fine ?
Thanks for any help.

The StaticResource markup extension doed not access fields or properties of the class that the Xaml is loaded into. Delete the line:-
A a_class = new A();
Instead instance A in a resource dictionary:-
<UserControl x:Class="YourApplication.UserControl1"
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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:local="clr-namespace:YourApplication"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<UserControl.Resources>
<local:A x:Key="a_class" />
</UserControl>
<Grid x:Name="LayoutRoot">
<Image x:Name="Image_" Stretch="Fill"
Source="{Binding imageSource}" DataContext="{StaticResource a_class}"/>
</Grid>
</UserControl>
Note is you want the Image control to track changes made to the imageSource property you need A to implement INotifyPropertyChanged.

Related

Setting ImageSource From Style Resource on UserControl

I have created a User Control that has an image component inside bound to a DependencyProperty. Everything works great at runtime, but I can not see the image in Design Time.
ButtonBase.xaml:
<UserControl x:Class="VirtualEnvelopes.ButtonBase"
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:VirtualEnvelopes"
x:Name="ButtonRoot">
<UserControl.Resources>
<BitmapImage x:Key="DefaultImage" UriSource="/assets/common/nullButton.png" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid>
<Image x:Name="MainImageBitmap" Source="{Binding Path=MainImage, ElementName=ButtonRoot, TargetNullValue={StaticResource DefaultImage}}" Tag="{Binding Path=Tag, ElementName=ButtonRoot}" />
</Grid>
</Grid>
</UserControl>
ButtonBase.xaml.cs
public partial class ButtonBase : UserControl
{
public static readonly DependencyProperty MainImageProperty =
DependencyProperty.Register("MainImage", typeof(Uri), typeof(ButtonBase), new UIPropertyMetadata(null));
public Uri MainImage
{
get { return (Uri)GetValue(MainImageProperty); }
set { SetValue(MainImageProperty, value); }
}
public ButtonBase()
{
InitializeComponent();
}
}
Usage:
<Window x:Class="VirtualEnvelopes.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:base="clr-namespace:VirtualEnvelopes">
<Window.Resources>
<Style x:Key="Button1Style" TargetType="{x:Type base:ButtonBase}">
<Setter Property="MainImage" Value="pack://application:,,,/pathToImage.png" />
</Style>
</Window.Resources>
<Canvas Width="1000" Height="1000">
<base:ButtonBase Style="{StaticResource Button1Style}" Tag="1" />
<base:ButtonBase MainImage="pack://application:,,,/pathToImage.png" Tag="2" />
</Canvas>
</Window>
Both buttons show at runtime, but only button #2 can be seen in the design space. The value line in the setter for Button1Style is underlined and says "specified method is not supported".
I've tried image asset as Content and Resource and it doesn't seem to make any difference. How can I get this image to show in design time and run time? There will eventually be many of these buttons and I need to lay them out specifically on the canvas at design time.
Any help would be appreciated.

Accessing dependency property in the same control xaml

In a Wpf Application i have a main window.
I have added a user control to the same project.
In the user control's .xaml.cs file a Dependency property ( "Value" name of the property ) is added.
I would like to access the defined dependency property in the usercontrol.xaml.
I know i can do the same while creating the control instance either in window.xaml or some other user control.
But is it possible to access the dependency property defined in .xaml.cs in .xaml?
Question updated based on Vivs answer
Ok. I mentioned my question wrongly. Nevertheless even i was not aware of accessing. But my actual intended question is it possible to set the dependency property from .xaml. some thing like from the example given above,
<Grid CustomBackground ="{Binding Path= BackgroundColor}" />
Or
<Grid CustomBackground ="Blue" />
Is it possible to set the custom dependency properties like this in the same .xaml?
Yes it is possible.
something like:
.xaml
<UserControl x:Class="MvvmLight26.UserControl1"
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:local="clr-namespace:MvvmLight26"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:UserControl1}}, Path=CustomBackground}" />
</UserControl>
and .xaml.cs:
public partial class UserControl1 : UserControl {
public static readonly DependencyProperty CustomBackgroundProperty =
DependencyProperty.Register(
"CustomBackground",
typeof(Brush),
typeof(UserControl1),
new FrameworkPropertyMetadata(Brushes.Tomato));
public UserControl1() {
InitializeComponent();
}
public Brush CustomBackground {
get {
return (Brush)GetValue(CustomBackgroundProperty);
}
set {
SetValue(CustomBackgroundProperty, value);
}
}
}
Alternate:
If you say have the DataContext of the UserControl as itself like:
public UserControl1() {
InitializeComponent();
DataContext = this;
}
then in your xaml you could just go with:
<Grid Background="{Binding Path=DataContext.CustomBackground}" />
Update:
For the new question,
Not quite directly.
You can "set" the value if the custom DP is registered as an attached property(Do remember an attached property is not the same as a normal DP in it's behavior and scope.)
If you want to keep it as a normal DP, then you can keep UserControl1 from the original answer same as it is(just the DP part. You need to remove the xaml part of it and make it a non-partial class in the code-behind) and then derive it to a new UserControl.
something like:
<local:UserControl1 x:Class="MvvmLight26.UserControl2"
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:local="clr-namespace:MvvmLight26"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
CustomBackground="Blue"
mc:Ignorable="d">
<Grid />
</local:UserControl1>
You can ofc name UserControl1 as something like "BaseUserControl" or so to make it obvious that it's not intended for direct usage.
You can set the value from the UserControl.Style in the same xaml as well.
xaml:
<UserControl x:Class="MvvmLight26.UserControl1"
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:local="clr-namespace:MvvmLight26"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<UserControl.Style>
<Style>
<Setter Property="local:UserControl1.CustomBackground"
Value="Blue" />
</Style>
</UserControl.Style>
<Grid Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:UserControl1}}, Path=CustomBackground}" />
</UserControl>

How to Expose a Control in XAML

I'm new in WPF and I'm creating a control. This control contains a DataGrid and some other WPF controls.
I created my Control as below:
<UserControl x:Class="MyControls.MyControl"
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"
mc:Ignorable="d"
d:DesignHeight="329" d:DesignWidth="535" >
<Grid>
<DataGrid Margin="6,25,6,35" Name="dataGrid" SelectionUnit="CellOrRowHeader" x:FieldModifier="public" HeadersVisibility="All"/>
<OtherControl HorizontalAlignment="Left" x:Name="otherControl" Height="34" VerticalAlignment="Bottom" Width="523" x:FieldModifier="private"/>
<Label Content="caption" Height="24" HorizontalAlignment="Left" Name="captionLabel" VerticalAlignment="Top" Foreground="#FF2626D1" x:FieldModifier="private"/>
</Grid>
</UserControl>
So, everything goes well so far, then I create a container UserControl which has in it my control created previously:
<UserControl x:Class="MyContainers.MyContainer"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" xmlns:my="clr-namespace:MyControls">
<Grid>
<my:MyControl>
</my:MyControl>
</Grid>
What I can not do is the following:
<my:MyControl>
<my:MyControl.dataGrid>
</my:MyControl.dataGrid>
</my:MyControl>
I previously set the datagrid's property of FieldModifier as public in order to get access to it in another xaml, but it raises an error from visual studio.
I need to "expose" my dataGrid in order to be able to add columns and their styles.
I would like to be able to do something like this:
<my:MyControl.dataGrid.Columns >
<DataGridTextColumn />
<DataGridTextColumn />
...
<DataGridTextColumn />
</my:MyControl.dataGrid.Columns>
So, is not enough to set the datagrid's property of FieldModifier as public?
Do I need to do something else? How can I achieve this? Is this even possible?
I hope someone can help me. Thank you in advance.
You cannot access the child DataGrid as MyControl.dataGrid -- MyControl has no property named "dataGrid".
You might try adding a dependency property of type ObservableCollection<DataGridColumn> to MyControl, and modify the dataGrid columns whenever that collection changes.
EDIT:
Whipped together a quick example for you:
UserControl code:
public partial class UserControl1 : UserControl
{
public static readonly DependencyProperty ColumnsProperty = DependencyProperty.Register("Columns", typeof(ObservableCollection<DataGridColumn>), typeof(UserControl1));
public ObservableCollection<DataGridColumn> Columns
{
get { return (ObservableCollection<DataGridColumn>)GetValue(ColumnsProperty); }
set { SetValue(ColumnsProperty, value); }
}
public UserControl1()
{
Columns = new ObservableCollection<DataGridColumn>();
Columns.CollectionChanged += (s, a) =>
{
dataGrid.Columns.Clear();
foreach (var column in this.Columns)
dataGrid.Columns.Add(column);
};
InitializeComponent();
}
}
UserControl xaml:
<UserControl x:Class="WpfApplication1.UserControl1"
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">
<Grid>
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False"/>
</Grid>
so you can use it like:
<Grid>
<l:UserControl1>
<l:UserControl1.Columns>
<DataGridTextColumn Header="Col1"/>
<DataGridTextColumn Header="Col2"/>
</l:UserControl1.Columns>
</l:UserControl1>
</Grid>

WPF Binding to Field

I have tried nearly everything I found on google. But nothing works.
I have this Xaml:
<UserControl x:Class="Controller.General.Led"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Ellipse Name="ellipse" Fill="{Binding ElementName=Led, Path=backColor}" Stroke="Black" StrokeThickness="3">
</Ellipse>
</Grid>
And this Code:
public partial class Led : UserControl
{
public Brush backColor = Brushes.Red;
public Led()
{
InitializeComponent();
}
}
So why doesn't this work?
I also tried a lot of other solutions but nothing is working.
A couple things wrong here, first you can't just set ElementName to a class. A quick easy way to fix this is just set the data context of your user control to itself, since it appears that's where the property you want to bind dwells. Also change the public variable to a PROPERTY (Binding does not work otherwise!)
public partial class Led : UserControl
{
public Brush backColor{get; set;}
public Led()
{
InitializeComponent();
this.DataContext = this;
backColor = Brushes.Red;
}
}
Next just alter your xaml to simply read...
<Ellipse
Name="ellipse"
Fill="{Binding backColor}"
Stroke="Black"
StrokeThickness="3"
/>
When you use ElementName=Led, you're telling WPF to look for an element named Led, however you haven't declared an element with that name.
KDiTraglia's answer is the correct way to go, but setting a name for your user control would also work:
<UserControl x:Name="Led" ...>
....
</UserControl>

How do you prevent a base class property from rendering in a DataForm?

Please excuse this novice question, but I'm ramping up on Silverlight and MVVM Light. I created a view called MyView.xaml and a corresponding MyViewModel.cs.
MyView.xaml
<navigation:Page x:Class="Dashboard.Views.MyView"
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:vm="clr-namespace:Dashboard.ViewModels"
xmlns:controls="clr-namespace:Dashboard.Controls"
mc:Ignorable="d"
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
d:DesignWidth="640" d:DesignHeight="480"
Title="MyView Page" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<navigation:Page.Resources>
<vm:MyViewModel x:Key="MyViewModel" />
</navigation:Page.Resources>
<navigation:Page.DataContext>
<Binding Source="{StaticResource MyViewModel}"/>
</navigation:Page.DataContext>
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical" Style="{StaticResource LoginControlsStackPanelStyle}" HorizontalAlignment="Center" VerticalAlignment="Center">
<toolkit:DataForm Name="dataForm1" CurrentItem="{Binding}"/>
</StackPanel>
</Grid>
MyViewModel.cs
namespace Dashboard.ViewModels
{
public class MyViewModel : ViewModelBase
{
public string FirstName { get; set; }
public string LastName { get; set; }
}
}
When I run the project, my form renders the IsInDesignMode property. I obviously do not want this. How can I prevent the base class property from rendering in the dataform?
Thanks.
Andrew
If you only want to prevent one filed from showing up, you can subscribe to the AutoGeneratingField event and set the Cancel flag on the events args to true. If you want to implement your own layout, you can set the AutoGeneratingFields flag to false and provide your own templates.

Resources