We Keep Coding

How to use binding in WPF with Caliburn.Micro and with UserControl? [duplicate]

This question already has answers here:
Issue with DependencyProperty binding
(3 answers)
Closed 2 years ago.
I have created a UserControl with some fields. I would like to use it and bind data to these fields. Most of them are static values but the DataValue property comes from one property of the MainView.
My code:
DataDisplayer.xaml
<UserControl x:Class="TabletMachineAccess.Controls.DataDisplayer"
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:TabletMachineAccess.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Name="dataDisplayer"
MaxHeight="100"
mc:Ignorable="d">
<Border Height="auto"
Margin="5"
Padding="5,2,5,2"
BorderBrush="Gray"
BorderThickness="2"
CornerRadius="5">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DataType}" />
<TextBlock Text=":" />
</StackPanel>
<Separator Style="{StaticResource BasicSeparator}" />
<TextBlock Margin="0,0,0,0"
HorizontalAlignment="Center"
FontWeight="Bold"
Text="{Binding Path=DataValue,
ElementName=dataDisplayer}" />
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock FontWeight="ExtraLight" Text="(" />
<TextBlock FontWeight="ExtraLight" Text="{Binding UnitText}" />
<TextBlock FontWeight="ExtraLight" Text=")" />
</StackPanel>
</StackPanel>
</Border>
</UserControl>
DataDisplayer.xaml.cs
public partial class DataDisplayer : UserControl
{
public double DataValue
{
get { return (double)GetValue(DataValueProperty); }
set { SetValue(DataValueProperty, value); }
}
// Using a DependencyProperty as the backing store for DataValue. This enables animation, styling, binding, etc...
public static readonly DependencyProperty DataValueProperty =
DependencyProperty.Register("DataValue", typeof(double), typeof(DataDisplayer), new PropertyMetadata(9.9));
public string DataType
{
get; set;
}
public string UnitText
{
get; set;
}
public DataDisplayer()
{
InitializeComponent();
this.DataContext = this;
}
}
I try to use it like this in MainView.xaml
<controls:DataDisplayer Grid.Row="1"
Grid.Column="0"
DataType="{x:Static res:Strings.PVUpper}"
DataValue="{Binding PVUpper}"
UnitText="{x:Static res:Strings.KgUnit}" />
I have this in my MainViewModel.cs
public double PVUpper { get; set; }
For those properties, which get data from the res:Strings works fine and display the correct values, but DataValue property always shows the default value of the DependencyProperty (9.9). The value of PVUpper changes in every second in the ViewModel so I would like to see this change on the View as well.

The Problem is the wrong DataContex for the Binding. You set the DataContext-Property of your DataDisplayer to itself
public DataDisplayer()
{
InitializeComponent();
this.DataContext = this;
}
So the Binding DataValue="{Binding PVUpper}" tries to find a property with the name PVUpper on your DataDisplayer instance, which of course dose not succeed.
So you should not do this.DataContext = this; and just leave the DataContext untouched (your control will inherit the datacontext of its parent).
You also will need to change the bindings in your DataDisplayer.xaml to address the changed DataContext.
But you can simplay add an ElementName=dataDisplayer to all the bindings to bind against your DataDisplayer instance.
So for example
<TextBlock FontWeight="ExtraLight" Text="{Binding UnitText}" />
becomes
<TextBlock FontWeight="ExtraLight" Text="{Binding UnitText, ElementName=dataDisplayer}" />

WPF UserControl DependencyProperty is null in click event but not in binding

I have a UserControl called ModuleButton. This UC has some DependencyProperties and some public ICommand properties. I am trying to get the button to execute the two ICommand's I have when the button is clicked and the checkbox is checked. However clicking them doesn't do anything.
I first was using the click events on both the button and the checkbox, however when calling the property "Module" it would say its null. In the spirit of trying to do this as MVVM I moved them to RelayCommands thinking maybe its a DataContext issue. I know that the DependencyProperties are working because I am bound to them on the XAML side and everything looks fine. I even bound my checkbox text to display my "Module" property with a ToString converter as I was convinced that wasn't being bound properly, and it is. I haven't been able to find anything with my specific issue. I have a suspicion that it has to do with my ICommand properties aren't in the same context as my DependencyProperties.
ModuleButton.xaml
All the bindings work here except the none DependencyProperties bindings. I currently don't have the checkbox command bound as I'm trying to troubleshoot the button command first.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<Button Style="{DynamicResource BaseButton}" Command="{Binding ModuleButtonClickCommand}" Content="{Binding Text}" Margin="5"/>
<DockPanel Grid.Row="1" Margin="0,0,0,4">
<CheckBox VerticalAlignment="Center" Content="{Binding Module, Converter={StaticResource ToString}}" IsChecked="{Binding IsChecked}" HorizontalAlignment="Left" Foreground="#FFE8E8E8" Margin="0" Style="{DynamicResource myCheckboxStyle}"/>
<Image Source="/Resources/Info-24.png" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0" ToolTip="{Binding Description}"/>
</DockPanel>
</Grid>
ModuleButton.xaml.cs
RelayCommands are never executed, they work in other parts of my program that aren't mixed in with DependencyProperties.
public partial class ModuleButton : UserControl
{
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
"Text", typeof(string), typeof(ModuleButton),
new PropertyMetadata("Default Text")
);
public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(
"Description", typeof(string), typeof(ModuleButton),
new PropertyMetadata("Default Description")
);
public static readonly DependencyProperty PageProperty = DependencyProperty.Register(
"Page", typeof(Uri), typeof(ModuleButton),
new PropertyMetadata(null)
);
public static readonly DependencyProperty ModuleProperty = DependencyProperty.Register(
"Module", typeof(IModule), typeof(ModuleButton),
new PropertyMetadata(null)
);
public static readonly DependencyProperty IsCheckedProperty = DependencyProperty.Register(
"IsChecked", typeof(bool), typeof(ModuleButton),
new PropertyMetadata(false)
);
public string Text { get => (string)GetValue(TextProperty); set => SetValue(TextProperty, value); }
public string Description { get => (string)GetValue(DescriptionProperty); set => SetValue(DescriptionProperty, value); }
public Uri Page { get => (Uri)GetValue(PageProperty); set => SetValue(PageProperty, value); }
public IModule Module { get => (IModule)GetValue(ModuleProperty); set => SetValue(ModuleProperty, value); }
public bool IsChecked { get => (bool)GetValue(IsCheckedProperty); set => SetValue(IsCheckedProperty, value); }
public event EventHandler FavoriteIsCheckedChanged;
public ModuleButton()
{
InitializeComponent();
FavoriteCheckboxClickedCommand = new RelayCommand(param => FavoriteCheckboxClicked());
ModuleButtonClickCommand = new RelayCommand(param => ModuleButtonClick());
}
public ICommand FavoriteCheckboxClickedCommand { get; private set; }
public ICommand ModuleButtonClickCommand { get; private set; }
private void FavoriteCheckboxClicked()
{
FavoriteIsCheckedChanged?.Invoke(this, new EventArgs() { });
}
private void ModuleButtonClick()
{
MessageBox.Show("ModuleButtonClick");
}
}
This is the tab control its all displayed in.
<Page.DataContext>
<viewmodels:MainToolPageViewModel/>
</Page.DataContext>
<TabControl x:Name="Tabs" Margin="5" ItemsSource="{Binding Tabs}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Content}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
This is how the Tabs list and its content area are populated.
var cats = ModuleManager.GetCategories();
foreach (var cat in cats.list.OrderBy(x => x.index))
{
var buttonsHost = new ModulesButtonHostView();
foreach (var mod in ModuleManager.LoadedModules.Where(x => x.Category == cat.name))
{
buttonsHost.Modules.Add(new ModuleItem {
Text = mod.Name,
Module = mod,
Description = mod.Description,
Page = mod.Page
});
}
Tabs.Add(new MyTabItem() {
Header = cat.name,
Content = buttonsHost
});
}
ModulesButtonHostView.xaml
Modules is a list of ModuleItems that have the same properties as the DependencyProperties on ModuleButton control.
<ItemsControl ItemsSource="{Binding Modules}" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:ModuleButton/>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel FlowDirection="LeftToRight"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
What I'm expecting to happen is when I click the Module Button, it is able to use the Module property to load that module, which I have that part of the code working, it's the actual using the Module property in the RelayCommand that I can't figure out why its null.
Edit:
Adding image of issue with binding suggestion

You should set the source or the DataContext of the bindings to the UserControl itself:
<Grid DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}">
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<Button Style="{DynamicResource BaseButton}" Command="{Binding ModuleButtonClickCommand}" Content="{Binding Text}" Margin="5"/>
<DockPanel Grid.Row="1" Margin="0,0,0,4">
<CheckBox VerticalAlignment="Center" Content="{Binding Module, Converter={StaticResource ToString}}" IsChecked="{Binding IsChecked}" HorizontalAlignment="Left" Foreground="#FFE8E8E8" Margin="0" Style="{DynamicResource myCheckboxStyle}"/>
<Image Source="/Resources/Info-24.png" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,5,0" ToolTip="{Binding Description}"/>
</DockPanel>
</Grid>
If you don't, the runtime will look for these properties in the ModuleItem class.

Windows Phone - custom control how propagate event to ViewModel

I am creating custom control for menu and I have ListBox in my control. Something like this:
<ListBox x:Name="MenuItemsList"
Grid.Row="1"
ItemsSource="{Binding ProgramList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now when I want to catch Tap event, get properties from class and keep MVVM model. How can I catch this in MainPage.xaml.cs or in MainViewModel?
I have this code in my MainPage.xaml:
<controls:BottomMenu x:Name="BottomMenu" Canvas.Top="{Binding MenuCanvasTop}"
Width="480" Height="400">
</controls:BottomMenu>
I have prepare this code in my MainViewModel:
public RelayCommand<string> GoToSectionCommand
{
get
{
return goToArticleCommand
?? (goToArticleCommand = new RelayCommand<string>(
NavigateToSection));
}
}
But I don't know how can I call it. What's the best way?
Edit:
I tried to extend listbox:
<ListBox x:Name="MenuItemsList"
Grid.Row="1"
ItemsSource="{Binding ProgramList, Mode=OneWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10">
<Button Content="{Binding Title}"
Command="{Binding ListButtonClickCommand, Source={RelativeSource Self}}"
CommandParameter="{Binding Url}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
With code-behind:
public ICommand ListButtonClickCommand
{
get { return (ICommand)GetValue(ListButtonClickCommandProperty); }
set { SetValue(ListButtonClickCommandProperty, value); }
}
public static readonly DependencyProperty ListButtonClickCommandProperty =
DependencyProperty.Register("ListButtonClickCommand", typeof(ICommand), typeof(BottomMenu), new PropertyMetadata(null));
public BottomMenu()
{
InitializeComponent();
}
Then in MainPage.xaml:
<controls:BottomMenu x:Name="BottomMenu" Canvas.Top="{Binding MenuCanvasTop}"
Width="480" Height="400"
ListButtonClickCommand="{Binding MenuItemButtonCommand}">
</controls:BottomMenu>
And in MainViewModel:
private ICommand menuItemButtonCommand;
public ICommand MenuItemButtonCommand
{
get
{
return menuItemButtonCommand
?? (menuItemButtonCommand = new RelayCommand(
NavigateToArticleSection));
}
}
For now without luck. It's not working. RelayCommand isn't triggered.
Edit2
I guess the problem is with binding command in custom control but I don't know how to fix it.

You just need to bind to the UserControl -- using "RelativeSource Self" will bind to the Button, which is not what you want. You should be able to use an "ElementName" binding to locate the user control:
<UserControl x:Name="UserControlName" ... >
...
<Button Content="{Binding Title}"
Command="{Binding ElementName=UserControlName,Path=ListButtonClickCommand}"
CommandParameter="{Binding Url}"/>
...
</UserControl>

How do I bind to a property of an object under a collection of collections?

I have an ObservableCollection of a class (TopLevel) that contains a name property and a list of another ObservableCollection of class (BottomLevel) that has just a name property. The binding on the highest list works, but when I try to bind to the property on the BottomList I get nothing. What am I missing here?
XAML:
<Window x:Class="WpfApplication7.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="myGrid" DataContext="topList">
<Border BorderBrush="AliceBlue" Grid.Column="0" BorderThickness="5">
<ItemsControl x:Name="ic1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label Content="{Binding Path=TopName}"/>
<Border BorderBrush="AntiqueWhite" Grid.Column="1" BorderThickness="5">
<Button Content="{Binding Path=BottomList.BottomName}"/>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
Code behind:
public partial class MainWindow : Window
{
public ObservableCollection<TopLevel> topList;
public MainWindow()
{
InitializeComponent();
topList = new ObservableCollection<TopLevel>();
topList.Add(new TopLevel("T" + (1 + topList.Count).ToString()));
topList[0].AddBottom();
topList.Add(new TopLevel("T" + (1 + topList.Count).ToString()));
topList[1].AddBottom();
ic1.ItemsSource = topList;
}
}
public class TopLevel
{
private ObservableCollection<BottomLevel> bottomList;
private string topName;
public void AddBottom()
{
bottomList.Add(new BottomLevel("B" + (1 + bottomList.Count).ToString()));
}
public TopLevel(string x)
{
bottomList = new ObservableCollection<BottomLevel>();
topName = x;
}
public string TopName
{
get
{
return topName;
}
set
{
if (topName!=value)
{
topName = value;
}
}
}
public ObservableCollection<BottomLevel> BottomList
{
get
{
return bottomList;
}
set
{
if (bottomList!=value)
{
bottomList = value;
}
}
}
}
public class BottomLevel
{
private string bottomName;
public BottomLevel(string x)
{
bottomName = x;
}
public string BottomName
{
get
{
return bottomName;
}
set
{
if (bottomName!=value)
{
bottomName = value;
}
}
}
}

Your path for the button is incorrect. BottomList does not have a "Name" property, so you can't bind to it. Instead, just use BottomName as your path.
Since your topList has a collection of "BottomLevel" you'll need some sort of nested items control to iterate over the "bottomList" collection (then use "BottomName" for your path as above).
As it stands, you basically have:
<ItemsControl //List of TopLevel>
//Your data context is now the TopLevel item itself
<Button Path=/> //What goes here? you have a whole collection of BottomLevel items to choose from!
</ItemsControl>

If you have only one item in BottomList Then you can use the below code for Button
<Button Content="{Binding Path=BottomList[0].BottomName}" Height="50"/>
If you want to Bind the BottomList to some List Control you can bind to the DataGrid then you can use the below code.
<Grid x:Name="myGrid" DataContext="topList">
<Border BorderBrush="AliceBlue" Grid.Column="0" BorderThickness="5">
<ItemsControl x:Name="ic1">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label Content="{Binding Path=TopName}"/>
<Border BorderBrush="AntiqueWhite" Grid.Column="1" BorderThickness="5">
<DataGrid ItemsSource="{Binding Path=BottomList}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Content="{Binding Path=BottomName}" Height="50"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</Grid>
Please let me know if you need any more help.

c# DataBinding in User control Win8

I've a ObservableCollection's list that receives data from the database, and i put this data in my grid, by data binding.
So, i've a user control that appears when i click in a item of this grid. I want that a text box of my user control, show the selected item of my grid.
I've tried this using data binding, but the textbox not shows the selected item.. is it possible ?
grid code:
<FlexGrid:C1FlexGrid
x:Name="grid" ItemsSource="{Binding list3, Mode=TwoWay}"
AutoGenerateColumns="False"
HorizontalAlignment="Left" Height="431" Margin="10,147,0,0" VerticalAlignment="Top" Width="1152" SelectionMode="Row" KeepCurrentVisible="True" Tapped="grid_Tapped" >
<FlexGrid:C1FlexGrid.DataContext>
<local:Controller/>
</FlexGrid:C1FlexGrid.DataContext>
<FlexGrid:C1FlexGrid.Columns>
<FlexGrid:Column Binding="{Binding describe}" Header="Describes" Width="800" />
<FlexGrid:Column Binding="{Binding describeNote}" Header="Describes Notes" Width="300" />
</FlexGrid:C1FlexGrid.Columns>
</FlexGrid:C1FlexGrid>
User Control code:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Binding"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:FlexGrid="using:C1.Xaml.FlexGrid"
x:Class="Binding.popNotas"
mc:Ignorable="d" Height="281.925" Width="656.03">
<Grid>
<TextBox x:Name="txt2" Text="{Binding SelectedItem.describe, ElementName=grid, Mode=TwoWay}" Height="38" Margin="140,5,141,0" TextWrapping="Wrap" VerticalAlignment="Top">
</TextBox>
</Grid>
cs code
public class Controller : Common.BindableBase
{
//DAOS
public TesteDao dao { get; set; }
private ObservableCollection<ClPasso> _list3 = new ObservableCollection<ClPasso>();
public ObservableCollection<ClPasso> list3
{
get { return _list3; }
set { this.SetProperty(ref this._list3, value); }
}
public Controller()
{
OnNavigatedTo();
}
protected async void OnNavigatedTo()
{
await InitializeDatabase();
list3 = await createlist3();
}
private async Task InitializeDatabase()
{
string datbasePath = Windows.Storage.ApplicationData.Current.LocalFolder.Path + "\\bd_example.db";
DataBase database = new DataBase (datbasePath);
await database.initialize();
dao = new TesteDao(database);
}
public async Task<ObservableCollection<ClPasso>> createlist3()
{
return await dao.joinListAsync(123, "924be4cc-16db-40c2-b342-d6c1fccbec86");
}
}
Help!
Thanks!!!

i've solved my question..
So, i created a DependencyProperty on code behind of my User Control, named selection, and i put this in Text of my text box.. after, when i will using my user control, in my main page, i passed the value in for porperty..
Like this:
User Control
public sealed partial class UCNotes : UserControl
{
public string selection
{
get { return (string)GetValue(selectionProperty); }
set { SetValue(selectionProperty, value); }
}
public static readonly DependencyProperty selecionadoProperty =
DependencyProperty.Register("selection", typeof(string), typeof(UCNotes), new PropertyMetadata(null));
User Control XAML
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:FlexGrid="using:C1.Xaml.FlexGrid"
x:Class="Fiscalizacao.UCNotes"
mc:Ignorable="d"
d:DesignHeight="327.068" Width="799.248">
<Grid Margin="10,0,10,10" Background="#FFB2B2B2" Height="303" VerticalAlignment="Bottom">
<TextBox x:Name="txtSelection" Text="{Binding selection}" Height="38" Margin="153,75,153,0" TextWrapping="Wrap" VerticalAlignment="Top" BorderBrush="Black"/>
Main Page XAML
<FlexGrid:C1FlexGrid
x:Name="questionsGrid"
HorizontalAlignment="Left" Height="417" Margin="31,181,0,0" VerticalAlignment="Top" Width="1306"
AutoGenerateColumns="False" KeepCurrentVisible="True"
SelectionMode="Row" ItemsSource="{Binding list, Mode=TwoWay}">
<FlexGrid:C1FlexGrid.Columns>
<FlexGrid:Column Binding="{Binding describes}" Header="Descrição" Width="900" />
<FlexGrid:Column Binding="{Binding descibesNotes}" Header="Nota" Width="*" />
</FlexGrid:C1FlexGrid.Columns>
</FlexGrid:C1FlexGrid>
<Popup x:Name="popNotes" IsLightDismissEnabled="True" IsOpen="False" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Margin="0,0,700,300" >
<local:UCNotes selection="{Binding SelectedItem.describes, ElementName=questionsGrid" />
</Popup>