I am new to WPF/XAML.
I am making a scrolling marquee using a demo I found online.
It is WinForms using a HostedElement WPF custom User Control.
I was able to setup a class called MyModelView so that I can bind the text value of a textblock to a variable I control (MyTextProperty).
But I can't figure out how to change the variable. My goal is to have a textbox you can enter text into and it will bind to the textblock value and change it while the program is running.
I am not able to do this, which I am trying to do (Change bound variable to TextBox1 value - it is not a valid reference to the variable... what is?):
Private Sub TextBox1_TextChanged(sender As Object, e As EventArgs) Handles TextBox1.TextChanged
MyViewModel.MyTextProperty = TextBox1.text
End Sub
How do I reference that class variable to change the text? I am missing something.
MyViewModel.vb
Imports System.ComponentModel
Public Class MyViewModel
Implements INotifyPropertyChanged
Public Sub New()
Me.myTextValue = "WINNING!!!"
End Sub
Private myTextValue As String = String.Empty
Public Property MyTextProperty() As String
Get
Return Me.myTextValue
End Get
Set(ByVal value As String)
Me.myTextValue = value
NotifyPropertyChanged("MyTextProperty")
End Set
End Property
Public Event PropertyChanged As PropertyChangedEventHandler _
Implements INotifyPropertyChanged.PropertyChanged
Private Sub NotifyPropertyChanged(ByVal propertyName As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
Scrolling Marque.xaml
<UserControl x:Class="ScrollingMarquee"
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:interopdemo="clr-namespace:InteropDemo"
mc:Ignorable="d"
d:DesignHeight="100" d:DesignWidth="300">
<UserControl.Resources>
<Storyboard x:Key="MarqueeScroll">
<DoubleAnimation RepeatBehavior="Forever"
Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetName="spMarquee"
From="1500" To="-500"
Duration="0:0:0:7" />
</Storyboard>
</UserControl.Resources>
<Grid>
<Grid.DataContext>
<interopdemo:MyViewModel/>
</Grid.DataContext>
<StackPanel x:Name="spMarquee" Orientation="Horizontal" Width="Auto">
<TextBlock Text="{Binding MyTextProperty}" FontSize="28" VerticalAlignment="Center" Margin="30,0,60,0"/>
<TextBlock Text="Hello Scrolling Text!" Foreground="Firebrick" FontSize="28" VerticalAlignment="Center" Margin="40,0,60,0"/>
<TextBlock Text="Ticker 2000!" Foreground="Red" FontSize="28" FontStyle="Italic" FontWeight="Bold" VerticalAlignment="Center" Margin="50,0,80,0"/>
<StackPanel.RenderTransform>
<TranslateTransform/>
</StackPanel.RenderTransform>
</StackPanel>
</Grid>
</UserControl>
Form1.vb
Imports System.Windows.Media.Animation
Public Class Form1
Private Sub Form1_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Me.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None
Me.WindowState = FormWindowState.Maximized
ElementHost1.Visible = True
Dim storyRunMarquee As Storyboard = ScrollingMarquee1.FindResource("MarqueeScroll")
storyRunMarquee.Begin()
End Sub
End Class
I've tried referencing the variable but can't make it work. The scrolling animation displays as "Winning! Hello Scrolling Text! Ticker 2000!" But I'm trying to change the bound "Winning!" text.
Remove
<Grid.DataContext>
<interopdemo:MyViewModel/>
</Grid.DataContext>
Declare a member variable in the form to hold reference to the view model object:
Private scrollerViewModel As MyViewModel
Instantiate an object of class MyViewModel in Form1_Load and set it as a DataContext for user control.
Private Sub Form1_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Me.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None
Me.WindowState = FormWindowState.Maximized
ElementHost1.Visible = True
scrollerViewModel = New MyViewModel
ScrollingMarquee1.DataContext = scrollerViewModel
Dim storyRunMarquee As Storyboard = ScrollingMarquee1.FindResource("MarqueeScroll")
storyRunMarquee.Begin()
End Sub
Modify property:
Private Sub TextBox1_TextChanged(sender As Object, e As EventArgs) Handles TextBox1.TextChanged
scrollerViewModel.MyTextProperty = TextBox1.text
End Sub
I think you just need to cast the datacontext of ScrollingMarquee1 as MyViewModel
CType(ScrollingMarquee1.DataContext, MyViewModel).MyTextProperty = TextBox1.text
Related
I've reviewed as many 'how to declare the viewmodel in XAML' posts I can and still can't figure this out. I'm using the simple program below to learn the basics regarding binding and this code works. When I click to insert(add) items, the listbox automatically reflects that change, as well as when I clear the list.
See my question(s) after the code.
Model
Namespace MVVM3
Public Class MyListItem
Public Property MyListItemID() As Integer
Public Property Name() As String
End Class
End Namespace
ViewModel
Namespace MVVM3
Public Class ViewModel
Implements INotifyPropertyChanged
Public Property allIdeas() As New ObservableCollection(Of MyListItem)
Public Sub New()
For index = 0 To 9
Dim anItem As New MyListItem
anItem.Name = "Idea " & index
allIdeas.Add(anItem)
Next
End Sub
Public Sub InsertAnItem()
Dim anItem As New MyListItem
anItem.Name = "Item " & allIdeas.Count()
allIdeas.Add(anItem)
NotifyPropertyChanged("allIdeas")
End Sub
Public Sub ClearStoredList()
allIdeas.Clear()
NotifyPropertyChanged("allIdeas")
End Sub
Public Event PropertyChanged As PropertyChangedEventHandler _
Implements INotifyPropertyChanged.PropertyChanged
Public Sub NotifyPropertyChanged(ByVal propertyName As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
End Class
End Namespace
View
<Window x:Class="MVVM3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:mvvm3"
Title="MainWindow" SizeToContent="WidthAndHeight" WindowStartupLocation="CenterScreen"
>
<StackPanel Grid.Column="1">
<Button Margin="25" Content="Insert an item" Click="InsertAnItem_Click"/>
<Button Margin="25" Content="Clear stored list" Click="ClearStoredList_Click"/>
<ListBox Name="listBox3" ItemsSource="{Binding allIdeas}" DisplayMemberPath="Name" Height="100">
</ListBox>
</StackPanel>
</Window>
Code Behind
Namespace MVVM3
Partial Class MainWindow
Private vm = New ViewModel
Sub New()
InitializeComponent()
DataContext = vm
End Sub
Private Sub InsertAnItem_Click(sender As Object, e As RoutedEventArgs)
vm.InsertAnItem()
End Sub
Private Sub ClearStoredList_Click(sender As Object, e As RoutedEventArgs)
vm.ClearStoredList()
End Sub
End Class
End Namespace
I want to move the ViewModel declaration into XAML to eliminate code behind. If I comment out DataContext = vm, no matter what method I've followed from various posts, the binding no longer updates the listbox.
The following changes result in the listbox showing the initial assignment that takes place in ViewModel.New, but after that no changes are reflected:
<Window x:Class="MVVM3.MainWindow"
...
xmlns:local="clr-namespace:mvvm3"
xmlns:vm="clr-namespace:mvvm3.MVVM3"
...
>
<Window.DataContext>
<vm:ViewModel/>
</Window.DataContext>
What am I missing? Is it a namespace problem?
I'm hoping to move on to Commands and ViewModel locators, but I don't see how I can do that until I understand this.
When you declare an instance of the ViewModel class in XAML, you may access it in code behind by casting the value of the DataContext property to the ViewModel type:
Partial Class MainWindow
Sub New()
InitializeComponent()
End Sub
Private Sub InsertAnItem_Click(sender As Object, e As RoutedEventArgs)
CType(DataContext, ViewModel).InsertAnItem()
End Sub
Private Sub ClearStoredList_Click(sender As Object, e As RoutedEventArgs)
CType(DataContext, ViewModel).ClearStoredList()
End Sub
End Class
My xaml:
<Window x:Class="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:TestMetroChartsVB"
xmlns:chart="clr-namespace:GravityApps.Mandelkow.MetroCharts;assembly=GravityApps.Mandelkow.MetroCharts"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:TestPageViewModel/>
</Window.DataContext>
<Grid>
<StackPanel>
<chart:ClusteredBarChart ChartTitle="Example1 " ChartSubTitle="Test1">
<chart:ClusteredBarChart.Series>
<chart:ChartSeries SeriesTitle="Errors" ItemsSource="{Binding Errors}"
DisplayMember="Category" ValueMember="Number"/>
</chart:ClusteredBarChart.Series>
</chart:ClusteredBarChart>
<Button x:Name="btnTest" Height="31" Margin="0,0,405,0" Content="Change Data"/>
</StackPanel>
</Grid>
</Window>
My view:
Imports GravityApps.Mandelkow.MetroCharts Class MainWindow
Private Sub btnTest_Click(sender As Object, e As RoutedEventArgs) Handles btnTest.Click
Dim test As New TestPageViewModel
test.changeData()
End Sub End Class
My viewModel:
Imports System.Collections.ObjectModel
Public Class TestPageViewModel
Public Property Errors() As ObservableCollection(Of TestClass)
Get
Return m_Errors
End Get
Private Set
m_Errors = Value
End Set
End Property
Private m_Errors As ObservableCollection(Of TestClass)
Public Sub New()
Errors = New ObservableCollection(Of TestClass)
Errors.Add(New TestClass("Data1", 5))
Errors.Add(New TestClass("Data2", 10))
Errors.Add(New TestClass("Data5", 15))
End Sub
Public Sub changeData()
Errors.Clear()
Errors.Add(New TestClass("DAta9", 10))
End Sub
End Class
My Model:
Public Class TestClass
Public Property Category As String
Get
Return m_Category
End Get
Set(value As String)
m_Category = value
End Set
End Property
Private m_Category As String
Public Property Number As Integer
Get
Return m_Number
End Get
Set(value As Integer)
m_Number = value
End Set
End Property
Private m_Number As Integer
Public Sub New(category As String, number As Integer)
Me.Category = category
Me.Number = number
End Sub End Class
It displays data initially like this:
But when I click my "change data" button data does not change?
What's the problem?
You are changing the wrong data:
Private Sub btnTest_Click(sender As Object, e As RoutedEventArgs) Handles btnTest.Click
Dim test As New TestPageViewModel
test.changeData()
End Sub
In your button's Click event handler, you create a new view model object and call the changeData() on it. But that's not the view model object the view is using, nor do you do anything to make it the view model object the view is using.
The best thing would be to just get the actual view model and change that one:
Private Sub btnTest_Click(sender As Object, e As RoutedEventArgs) Handles btnTest.Click
Dim view As Button = CType(sender, Button)
Dim test As TestPageViewModel = CType(view.DataContext, TestPageViewModel)
test.changeData()
End Sub
The above assumes that the Button sending the Click event has inherited the MainWindow's data context.
I am trying to populate a combobox using databinding.Below are the snippets of my code.
XAML:
<ComboBox Name="cmbClientName" ItemsSource="{Binding Path=blClientList}" DisplayMemberPath="Name" SelectedValuePath="Name" SelectedValue="{Binding Path=blClientList}"/>
Code behind 'MainWindow':
Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
Dim blClientList As ObservableCollection(Of String) = New ObservableCollection(Of String)
Dim objClientRepository As PET_ClientRepository = New PET_ClientRepository
For Each objClient As PET_Client In objClientRepository.GetAll()
blClientList.Add(objClient.Name)
Next
Me.cmbClientName.ItemsSource = blClientList
End Sub
Class1.vb:
Public Property Name As String
Get
Return _Name
End Get
Set(value As String)
_Name = value
End Set
End Property
I would like to see the name of the client in my combobox. The code above does not return anything and combobox is blank.I know the problem lies in binding but can not figure out what I am doing wrong.
Here's an example that may help you achieve your desired result:
Re: your comment, binding is good, you just need to set context
WPF
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication4VB"
Title="MainWindow" Height="100" Width="293">
<Window.DataContext>
<local:Vm />
</Window.DataContext>
<Grid>
<ComboBox ItemsSource="{Binding Collection}" DisplayMemberPath="Name" />
</Grid>
</Window>
important things being that you add your local namespace:
xmlns:local="clr-namespace:WpfApplication4VB"
and that you set DataContext
Classes
Public Class Vm
Public Property Collection As System.Collections.ObjectModel.ObservableCollection(Of Thing)
Public Sub New()
Collection = New ObjectModel.ObservableCollection(Of Thing)()
Collection.Add(New Thing("Test1"))
Collection.Add(New Thing("Test2"))
Collection.Add(New Thing("Test3"))
End Sub
End Class
Public Class Thing
Public Property Name As String
Public Sub New(Name As String)
Me.Name = Name
End Sub
End Class
Thank you everyone for your help.
I went ahead with populating the combobox in the code behind in stead of binding it to a datasource. I didn't even have to pass "ItemSource" in XAML. I did however pass ItemSource in Mainwindow.vb which did the trick for me.
Below are the snippets of code that are working:
Code behind MainWindow.vb
Private Sub MainWindow_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
Me.Username.Text = System.Security.Principal.WindowsIdentity.GetCurrent().Name
Dim blClientList As ObservableCollection(Of String) = New ObservableCollection(Of String)
Dim objClientRepository As PET_ClientRepository = New PET_ClientRepository
For Each objClient As PET_Client In objClientRepository.GetAll()
blClientList.Add(objClient.Name)
Next
Me.cmbClientName.ItemsSource = blClientList
XAML:
<ComboBox Name="cmbClientName" IsReadOnly="True" PresentationTraceSources.TraceLevel="High"/>
Tracelevel isn't doing anything but is just there to provide debug tracing support.
Class1.vb
Public Property Name As String
Get
Return _Name
End Get
Set(value As String)
_Name = value
End Set
End Property
Replace this:
Me.cmbClientName.ItemsSource = blClientList
with this:
Me.DataContext = blClientList
and correct XAML as:
<ComboBox Name="cmbClientName" ItemsSource="{Binding}"
DisplayMemberPath="." SelectedValuePath="."/>
I am quite new to WPF and I am confused about how Data Bindings should behave.
I have created a class that has 1 property ("status") and three methods that are responsible for changing the status. This class implements the INotifyPropertyChanged interface so that I am able to notify the calling code when the Status changes.
The class looks like this:
Public Class StreetLight
Implements System.ComponentModel.INotifyPropertyChanged
Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
Private _status As String
Public Property Status As String
Get
Return _status
End Get
Set(ByVal value As String)
_status = value
RaiseEvent PropertyChanged(Me, New System.ComponentModel.PropertyChangedEventArgs("Satus"))
End Set
End Property
Public Sub New()
_status = "unknown"
End Sub
Public Sub Red()
Status = "Red"
End Sub
Public Sub Yellow()
Status = "Yellow"
End Sub
Public Sub Green()
Status = "Green"
End Sub
End Class
I have created a WPF User Control to represent this class.
This User Control is bound to an instance the StreetLight class. It displays the status of the StreetLight and allows the user to change the status using buttons:
<UserControl x:Class="StreetLightUC"
x:Name="StreetLightUC"
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:twpf="clr-namespace:TryingWPF"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="360">
<UserControl.Resources>
<twpf:StreetLight x:Key="theLight" PropertyChanged="theLight_PropertyChanged" />
</UserControl.Resources>
<StackPanel x:Name="StreetLightContent" Orientation="Horizontal">
<Label Width="100" HorizontalAlignment="Left">Street Light _Status</Label>
<Label x:Name="streetLightValue" Width="120" HorizontalAlignment="Right" Content="{Binding Path=Status, Mode=OneWay}"></Label>
<Button x:Name="Red" Click="TurnRed" Width="60">Turn Red</Button>
<Button x:Name="Green" Click="TurnGreen" Width="60">Turn Green</Button>
</StackPanel>
</UserControl>
My problem is that even when the status is changed for theLight, it is not updated in the Label that is bound to the Status property unless I create a new StreetLight and set the DataContext to this new instance in the "StreetLight_PropertyChanged" event that handles the PropertyChagned event for the "theLight"
Like so:
Public Class StreetLightUC
Public Sub New()
InitializeComponent()
End Sub
Private Sub TurnRed(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Dim light As StreetLight= CType(FindResource("theLight"), StreetLight)
light.Red()
End Sub
Private Sub TurnGreen(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Dim light As StreetLight = CType(FindResource("theLight"), StreetLight)
light.Unlock()
End Sub
Private Sub theLight_PropertyChanged(ByVal sender As System.Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs)
Dim light As StreetLight = CType(sender, StreetLight )
Dim newLight As New StreetLight
newLight.Status = light.Status
StreetLightContent.DataContext = newLight
End Sub
End Class
Am I doing something wrong?
It doesn't seem like I should have to create a new instance of the class to display the updated status-property when this property is change....
Thanks,
-Frinny
You have a typo ("Satus" instead of "Status"):
RaiseEvent PropertyChanged(Me, New System.ComponentModel.PropertyChangedEventArgs("Satus"))
Should be:
RaiseEvent PropertyChanged(Me, New System.ComponentModel.PropertyChangedEventArgs("Status"))
With this typo, the binding doesn't see that "Status" has changed, and never updates. If you correct this, the PropertyChanged event will correctly reflect that "Status" has changed.
I want my WPF ComboBox's ItemsSource property to be bound to MyListObject's MyList property. The problem is that when I update the MyList property in code, the WPF ComboBox is not reflecting the update. I am raising the PropertyChanged event after I perform the update, and I thought WPF was supposed to automatically respond by updating the UI. Am I missing something?
Here's the CLR object:
Imports System.ComponentModel
Public Class MyListObject
Implements INotifyPropertyChanged
Private _mylist As New List(Of String)
Public Sub New()
_mylist.Add("Joe")
_mylist.Add("Steve")
End Sub
Public Property MyList() As List(Of String)
Get
Return _mylist
End Get
Set(ByVal value As List(Of String))
_mylist = value
End Set
End Property
Public Sub AddName(ByVal name As String)
_mylist.Add(name)
NotifyPropertyChanged("MyList")
End Sub
Private Sub NotifyPropertyChanged(ByVal info As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(info))
End Sub
Public Event PropertyChanged(ByVal sender As Object, _
ByVal e As System.ComponentModel.PropertyChangedEventArgs) _
Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
End Class
Here is the XAML:
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300"
xmlns:local="clr-namespace:WpfApplication1"
>
<Window.Resources>
<ObjectDataProvider x:Key="MyListObject" ObjectType="{x:Type local:MyListObject}"/>
</Window.Resources>
<Grid>
<ComboBox Height="23"
Margin="24,91,53,0"
Name="ComboBox1"
VerticalAlignment="Top"
ItemsSource="{Binding Path=MyList, Source={StaticResource MyListObject}}"
/>
<TextBox Height="23"
Margin="24,43,134,0"
Name="TextBox1"
VerticalAlignment="Top" />
<Button Height="23"
HorizontalAlignment="Right"
Margin="0,43,53,0"
Name="btn_AddName"
VerticalAlignment="Top"
Width="75">Add</Button>
</Grid>
</Window>
And here's the simple code-behind:
Class Window1
Private obj As New MyListObject
Private Sub btn_AddName_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) _
Handles btn_AddName.Click
obj.AddName(TextBox1.Text)
End Sub
End Class
Thanks!
You are binding to a list of strings. That list class does not implement Inotifyproperty. You should use an observablecollection instead.
I also notice in your code behind you declare
Private obj As New MyListObject
This is not the static resource you bound the combo box to. So your add call would not be reflected in your view.
The ObservableCollection is most likely the solution, but if it still gives you grief, you can directly access your static resource by calling the following code after your list gets updated:
DirectCast(Me.FindResource("MyListObject"), ObjectDataProvider).Source = _myList
Try using a BindingList(Of T) instead of a List(Of T).
Edit: I am new to WPF and it does look like BindingList isn't a complete solution to your problem, but it might be a step in the right direction. I was able to test the MyListObject converted to BindingList in WinForm and the ListChanged event was raised to the ComboBox which then updated its list.
I found this (possible) solution to wrap your class in an ObservableCollection that might help you solve your problem
Enabling WPF Magic Using WCF - Part 1
This is the code to update your object to a BindingList. Combine your code with the code from that resource and you should be good to go.
Public Class MyListObject
...
'Private _mylist As New List(Of String)
Private _mylist As New BindingList(Of String)
...
'Public Property MyList() As List(Of String)
' Get
' Return _mylist
' End Get
' Set(ByVal value As List(Of String))
' _mylist = value
' End Set
'End Property
Public Property MyList() As BindingList(Of String)
Get
Return _mylist
End Get
Set(ByVal value As BindingList(Of String))
_mylist = value
End Set
End Property
...
End Class