We Keep Coding

How do I add a functioning button to a listboxitem in UWP XAML

I have a UWP C# app with a ListBox. I set the ListBox ItemContainerStyle property to a style in a resource. I am stuck trying to add a button to the ControlTemplate within the style. I don't know where to add the Clicked or tapped event handler.
I converted the code to use a UserControl added directly to the list and it works great except that the VisualStateManager doesn't work in the UserControl.
So I can get a functioning button with code-behind for a UserControl and I can get the VisualStateManager to work and handle my custom visualization for the ListBoxItem selections, but I can't get visual states as well as a functioning button.
I'm not sure what code to show here because like I said, everything but the button works fine with a style and everything works fine with a user control except for visual state handling.
I have read all the questions I can find about this and the closest I can come is to having a handler function for the button but no one says what class to add it to; they just show the function alone not in any context. And visual state handling always seems to require the developer to detect mouse over, selection, etc..., states to be handled in code with a handler for each state to detect and then a call to GoToState to get the visual state manager to do its thing. There has got to be a way to do this without all of these gyrations and extra and seemingly redundant code.
[Update]
I am currently using a style for the ListBoxItem by setting ItemContainerStyle. Additionally, I am trying to bind the Command parameter of the newly added Button. It doesn't work. Here's the XAML for the style, showing just the important parts (because it all works as expected except for the button). This shows the two text boxes and the button. It is important to note that the binding of the Text properties of the TextBox elements works fine and the text shows up exactly as expected. this makes me want to assume that the binding source and path stuff is all set correctly. But yet again, I an foiled because the Command binding isn't working and no errors are reported at build or run time:
<StackPanel Background="Transparent" Margin="0,0,0,0">
<TextBlock FontSize="22" TextWrapping="Wrap" FontWeight="SemiLight" x:Name="Title" Text="{Binding Title}" Margin="12,4,24,6" Visibility="{Binding Title, Converter={StaticResource StringToVisibiltyConverter}}" Foreground="{Binding color}"/>
<TextBlock TextWrapping="Wrap" Visibility="{Binding SubTitle, Converter={StaticResource StringToVisibiltyConverter}}" x:Name="Subtitle" Text="{Binding SubTitle}" Margin="12,-6,24,6" Opacity="0.8" Foreground="{Binding color}"/>
<Button Command="{Binding ClickCommand}" CommandParameter="x">X</Button>
</StackPanel>
Here is the code for the object that I add to the ListBox:
public class MultilineListboxItem : Object
{
public MultilineListboxItem() { ClickCommand = new _ClickCommand(); }
public string Title { get; set; }
public string SubTitle { get; set; }
public string Original { get; set; }
public override string ToString() { return Original; }
public SolidColorBrush color { get; set; }
_ClickCommand ClickCommand;
}
And of course, the _ClickCommand class definition:
public class _ClickCommand : ICommand
{
public void Execute(object parameter)
{
Diagnostics.AppendDiagnostic( "derf" );
}
public bool CanExecute(object parameter)
{
Diagnostics.AppendDiagnostic( "derf" );
return true;
}
public event EventHandler CanExecuteChanged;
}
Those are my own diagnostic reporting functions, not something in C# or WinRT.
Now that I ma back to using a style to define the look of the list items, the visual states are all working as expected.

Try to change ClickCommand to a public property.
The properties you use as binding source properties for a binding must be public properties of your class. Explicitly defined interface
properties cannot be accessed for binding purposes, nor can protected,
private, internal, or virtual properties that have no base
implementation.
You cannot bind to public fields.
references:
https://stackoverflow.com/a/19704292/3869284
https://msdn.microsoft.com/en-us/library/ms743643.aspx?f=255&MSPPError=-2147217396

UWP simple Databinding not working

I have been following some training videos and created a simple app with UWP and C#, and using UWP Databinding, unfortunately passing data from a textbox to a class property just doesn't work. Nothing happens. No data is passed, no errors generated.
So my class(everything stripped to relevant code) is
public class ChangeCalc
{
public string GoodsCost { get; set; }
public string Amountpaid { get; set; }
Under page is
<Page.DataContext>
<local:ChangeCalc />
</Page.DataContext>
Under my 2 TextBoxes I have
<TextBox
x:FieldModifier="public"
Text="{Binding Amountpaid, Mode=TwoWay}"
TextWrapping="Wrap" />
So it is all there.
If I just call it under the button Click event in the codebehind it works OK. Data passes, code runs.
myChangeCalc.GoodsCost = txtCost.Text;
myChangeCalc.Amountpaid = txtPaid.Text;
When is the databinding initiated? What event, if any, is missing?
Thanks for your help.

There is nothing being passed through. yet with the click event to the same properties, it passes OK.
This is because when you use data binding, you just give a data model as DataContext in where the property can be found to the TextBox, you didn't actually pass any real data to the TextBox. And when you use button click event, you create an instance "myChangeCalc" of this data model and pass a real data like "txtPaid.Text" to the property "Amountpaid" of this instance.
silverfighter, you don't have to implement INotifyPropertyChanged (what do I know I can't get it to work) The instructions say : Changes to TextBox.Text are sent to a two-way bound source when the TextBox loses focus, and not after every user keystroke.
Yes, but this change is from binding target to binding source, if you want change from binding source to binding target here, you must implement the INotifyPropertyChanged interface on the source object so that the source can report changes through events that the binding engine listens for.
So, as an example here:
<Page.Resources>
<local:ChangeCals x:Name="ccData" Amountpaid="111" />
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource ccData}">
<TextBox
x:FieldModifier="public"
Text="{Binding Amountpaid, Mode=TwoWay}"
TextWrapping="Wrap" Height="50" />
</Grid>
You can create a instance of your data model in the page resources, and set this resource as the DataContext of Binding.
Another example:
<TextBox
x:FieldModifier="public"
Text="{Binding Amountpaid, Mode=TwoWay}"
TextWrapping="Wrap" />
code behind:
public MainPage()
{
this.InitializeComponent();
this.DataContext = myChangeCalc;
}
public ChangeCals myChangeCalc = new ChangeCals { Amountpaid = "111", GoodsCost = "222" };
Any way, the binding source should be an instance of your data model(ChangeCals class). Since you used {Binding} here, I didn't show sample of using {x:Bind}, if you want to learn more about {x:Bind}, you can refer to {x:Bind} markup extension. For more info about binding and x:Bind, you can refer to Data binding in depth.

Best Approach for Stacking an Unknown Number of Rows in WPF

I have a WPF GUI setup like this currently:
The "Check for Third Party Updates" button will query the machine for outdated application installs and display the results, each update grouped in its own row/section with some text describing the update and a button allowing them to initiate the install.
I have a class built for third party updates that contains application name, version, installpath, message to display, etc. My question is largely how to implement the visual components. Every time the list of "apps to be updated" is iterated through and a member is found, a new row needs to be generated with common elements (button, text, picture,etc.). And I don't know how many rows might be generated, so I need to allow for the potential of scrolling down within the tab. Is a listbox control the way to go? How can I setup a visual template for the rows that are dynamically created to adhere to?

A ListBox would be a sensible approach. You would have to create a DataTemplate for the ListBoxItems and assign that to the ItemTemplate property of the ListBox, as described in Styling and Templating an ItemsControl. All the rest, like the ability to select items, or to scroll through the list, is of course done automatically by the ListBox control.
It might look like this:
<ListBox ItemsSource="{Binding ThirdPartyUpdates}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding AppIcon}" Margin="5"/>
<TextBlock Text="{Binding AppName}" Margin="5"/>
<TextBlock Text="{Binding AppVersion}" Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The view model for the above ListBox would be something like this:
public class ThirdPartyUpdate
{
public string AppIcon { get; set; }
public string AppName { get; set; }
public string AppVersion { get; set; }
}
public class ViewModel
{
public ObservableCollection<ThirdPartyUpdate> ThirdPartyUpdates { get; set; }
}

You can use ItemsControl and bind it to a collection of your Class and use ItemsControl's template to bind your data to whichever control you want. Check out this Example
For each item in the collection you will have a row created. Surround the item control with a ScrollViewer. Set the VerticalScrollbar visibility to auto so that it will be visible only when required. And if you set a maximumheight to a value you feel right and set the height to auto. It will grow till the maximum height and the scroll bar will be visible if items are added beyond that.

For a user control, how to set the binding of a item template item to a user property?

I have a simple user control, which is essentially just an AutoCompleteBox with some custom logic.
For a specific instance (a collection of Persons), I want it to look like this:
<sdk:AutoCompleteBox Name="myACB" ItemsSource="{Binding People}" FilterMode="StartsWith" MinimumPrefixLength="2" ValueMemberBinding={Binding LastName}>
<sdk:AutoCompleteBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding LastName}" />
</DataTemplate>
</sdk:AutoCompleteBox.ItemTemplate>
</sdk:AutoCompleteBox>
However, I want to make the data source generic and therefore the display values will be different (ValueMemberBinding and the template TextBlock text). That is why I am making a custom control so I can specify the differences with properties.
I have no problem setting the source with a user control property, but I am having difficulty with the display binding properties. Right now I have:
public static DependencyProperty DisplayMemberProperty = DependencyProperty.Register("DisplayMember", typeof(string), typeof(myAutoComplete), null);
public string DisplayMember
{
get
{ return myACB.ValueMemberPath; }
set
{
myACB.ValueMemberPath = value; // this works fine
// but how can set the text binding for the templated textblock?
}
}
I want the DisplayMember property to be the property name to display for whatever kind of custom collection (persons, cars, etc) I have bound to the AutoCompleteBox.
I don't think I can modify the datatemplate programmatically. Is there a way I can do this with binding (relative source)?

I am not sure if this works, but I think you could bind the text directly to the ValueMemberBinding property and use a converter to get the text out of it...

<TextBlock Text="{TemplateBinding DisplayMember}" />

Thank you for the suggestions.
I was unable to get a solution that I preferred, but my workaround is to just pass in a datatemplate resource as a property and that gets assigned to the autocompletebox itemtemplate.
Define a template:
<DataTemplate x:Key="myCustomDT">
<!-- whatever you want here -->
</DataTemplate>
Create the user control property for it:
public static DependencyProperty DisplayTemplateProperty = DependencyProperty.Register("DisplayTemplate", typeof(DataTemplate), typeof(myAutoComplete), null);
public DataTemplate DisplayTemplate {
get { return myACB.ItemTemplate; }
set { myACB.ItemTemplate = value; }
}
Now:
<local:myAutoComplete DisplayTemplate="{StaticResource myCustomDT}" />
Not the best method, but it will work for now.

Editable WPF ListBox

I have a ObservableCollection that's bound to a ListBox in WPF. I want the ListBox to be editable, and for the editing changes to be saved to the collection. Since WPF doesnt provide an editable listbox, I've tried creating my own by changing the ListBox.ItemTemplate.
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="EditableText" Text="{TemplateBinding Content}"/>
</DataTemplate>
</ListBox.ItemTemplate>
Changing the ItemTemplate gives me editable boxes, but any changes to the textboxes dont get saved to the ObservableCollection. Is there a way to have an editable ListBox with two way binding?

You cannot do it this way.
To achieve that kind of trick, you would need your items to be "holder classes" that expose a property you can bind your textbox to.
To understand it, imagine the following pseudo sequence of calls:
class ListBox
{
Bind(Items)
{
foreach(var item in Items)
{
DataTemplate Template = LoadTemplateForItem(item.GetType()); // this is where your template get loaded
Template.Bind(item); //this is where your template gets bound
}
}
}
Your template (the DataTemplate with the listbox) is loaded and the item (which I assume is a string in your case) gets passed in.
At this point, it only knows the string, and cannot influence anything upwards. A two-way binding cannot influence the collection because the template does not know in which context it is being used, so it cannot reach back to the original collection and modify its contents.
For that matter, this is the same thing for the TextBox. If it is not given a conainer and a property name, it has nowhere to "store back" the changes.
This basically the same as passing a string into a function call. The function cannot change which string was passed in (ignoring tricks such as by-reference argument passing).
To get back to your case, you need to build a collection of objects which expose a property containing the value that needs to be edited:
public class MyDataItem
{
string Data { get; set;}
}
Then you can bind your ListBox to a collection of those items and modifiy your datatemplate:
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="EditableText" Text="{Binding Data, Mode=TwoWay}"/>
</DataTemplate>
</ListBox.ItemTemplate>

Bind to a model property -- i.e. a property of the data object -- rather than to a view property such as Content. For example:
// model class
public class Widget : INotifyPropertyChanged
{
public string Description { ... }
}
<!-- view -->
<DataTemplate>
<TextBox Text="{Binding Description}" />
</DataTemplate>
Note this will not work if your ItemsSource is ObservableCollection (because there's no property to bind to).