We Keep Coding

Changing property IsIndeterminate on MaterialDesign button in WPF

I'm using a material design button in WPF and I'm not quite sure how to control the property IsIndeterminate from within C# code as the below does not work, like it usually does with "standard" properties like Content etc.
BTN_Search.materialDesign:ButtonProgressAssist.IsIndeterminate = true;
The WPF for the button below:
<Grid Width="124" Margin="5" VerticalAlignment="Center">
<Button Style="{StaticResource MaterialDesignRaisedButton}"
materialDesign:ButtonProgressAssist.Value="-1"
materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
materialDesign:ButtonProgressAssist.IsIndeterminate="False"
Content="Search"
Margin="2,0"
IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}"
x:Name="BTN_Search"
Click="Search_Click"/>
</Grid>
I want the materialDesign:ButtonProgressAssist.IsIndeterminate property to be changed in the Click event when the button is pressed and then once I am done processing I need to change it back to False.

It is a dependency property so it can be set like this:
ButtonProgressAssist.SetIsIndeterminate(BTN_Search, true);
There is other examples on Github in the MaterialDesignInXamlTooking project https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/blob/master/MaterialDesignThemes.Wpf.Tests/ButtonProgressAssistTests.cs

Binding a Text property for filtering within a popup that is part of a DataTemplate not working

I have an application that displays a datagrid. However the data has gotten big and I want to incorporate filters to some of the rows. I've gotten as far as creating a DataTemplate for my headers:
<DataGrid>
<DataGrid.Resources>
...
<DataTemplate x:Key="HeaderTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl Content="{Binding}" VerticalAlignment="Center"/>
<ToggleButton Name="FilterButton" Grid.Column="1" Content="▼" Margin="2, 1, 1, 1" Padding="1, 0"/>
<Popup IsOpen="{Binding ElementName=FilterButton, Path=IsChecked}" PlacementTarget="{Binding ElementName=FilterButton}" StaysOpen="False">
<Border Background="White" Padding="3">
<TextBox Text={Binding PetNameFilterSearchBox, Mode=TwoWay} Width="300"/> <!--The Text Box I want to bind-->
</Border>
</Popup>
</Grid>
</DataTemplate>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Width="6*" Header="Pet Name" Binding="{Binding PetName}" ElementStyle="{DynamicResource DataGridTextColumnWrap}" HeaderTemplate="{StaticResource HeaderTemplate}"/>
</DataGrid.Columns>
</DataGrid>
So far what it does is show a button next to the header text and when you click on it a small popup window appears containing a text box. The desired effect is that the user can type in the text box and data will be filtered according to what was typed.
In my view model I already have my filter text box property that I want to use for binding:
public string PetNameFilterSearchBox
{
get
{
return _petNameFilterSearchBox;
}
set
{
_petNameFilterSearchBox = value;
RaisePropertyChanged(nameof(PetNameFilterSearchBox));
FilterData(); //As you're writing
}
}
private string _petNameFilterSearchBox = string.Empty;
public CollectionView PetDataFilterView { get; set; }
public bool OnFilterTriggered(object item)
{
if (item is AvailablePetInfo petInfo)
{
var pet_name = PetNameFilterSearchBox;
if (pet_name != string.Empty)
return (petInfo.DisplayName.Contains(pet_name));
}
return true;
}
public void FilterData()
{
CollectionViewSource.GetDefaultView(AvailablePetInfo).Refresh();
}
//Constructor
public PetInfoViewModel()
{
AvailablePetInfo = GetPetInfo();//gets the list
ContactFilterView = (CollectionView)CollectionViewSource.GetDefaultView(AvailablePetInfo);
ContactFilterView.Filter = OnFilterTriggered;
}
When I run my code I see the little button next to the header, I click on it and I see the textbox. But when I start typing I dont see my datagrid updating. I set some breakpoints in my PetNameFilterSearchBox and I find that when I start typing it's not getting hit. This tells me that there's something wrong with the binding. Can someone tell me what I'm doing wrong?

Your problem is one of DataContext.
I'll be assuming PetNameFilterSearchBox is a property of the Window hosting the DataGrid and that the appropriate DataContext is set at the Window level.
Normally, DataContext is inherited by child elements, so setting the DataContext for the Window would set it for all its children. But things change once you start using DataTemplates.
In a DataTemplate, the root DataContext is always the data object that's being displayed. In your case, that's the string "Pet Name". This is why you can put <ContentControl Content="{Binding}"/> inside the DataTemplate and have it display "Pet Name".
The downside is you can't put <TextBox Text="{Binding PetNameFilterSearchBox}"/> and expect it to bind to the Window, because that DataContext is being overridden by the DataTemplate.
Normally, you can get around the DataTemplate DataContext problem by using RelativeSource, which you can use walk up the visual tree and find another source to bind to. But this doesn't work inside a Popup because a Popup is not actually part of the Window's visual tree.
What will work is ElementName:
<TextBox Text="{Binding PetNameFilterSearchBox, Mode=TwoWay, ElementName=W}" Width="300"/>
In the above example, I set on my Window Name="W".

Getting binding to work with Popupcoloredit

I am trying to get colorpicker working for my program and I'm having trouble with it keeping the value on reinitialization. I was wondering if I'm missing something or if popupcoloredit initialization is overwriting the value. On viewmodel initialization it keeps the strings and bools I have but the Colors are reset without the setter being called so I think it's being destroyed.
My XAML is as follows:
<TextBlock Text="{x:Static meta:MetaCommon.Text}" Style="{StaticResource ContentHeader}" TextWrapping="Wrap" />
<dxe:PopupColorEdit Name="TextColour" Text="{Binding TextColour}" MinWidth="130" Margin="0,0,0,10" />
I then use it in the textbox
<TextBox Text="Sample text..." Margin="0,0,0,10" Name="TextBox1"
Foreground="{Binding Path=Color, ElementName=TextColour, Converter={StaticResource ColorToBrushConverter}}"
Background="{Binding Path=Color, ElementName=BackgroundColour, Converter={StaticResource ColorToBrushConverter}}" />
C# is simply a get set
public static Color TextColour { get; set; }

Don't bind to PopupColorEdit.Text. Bind to PopupColorEdit.Color. And because it's DevExpress, always be on the lookout for their habit of neglecting to set BindsTwoWaysByDefault = true on dependency properties where they should. This is one such property. By default, the Color property of PopupColorEdit never updates the property you bind to it. This is correct approximately never, but it's the default they shipped it with.
<dxe:PopupColorEdit
Name="TextColour"
Color="{Binding TextColour, Mode=TwoWay}"
MinWidth="130"
Margin="0,0,0,10"
/>
Your viewmodel property must be System.Windows.Media.Color, not System.Drawing.Color:
public static System.Windows.Media.Color TextColour { get; set; }
And lastly, you must implement INotifyPropertyChanged properly in your viewmodel and raise PropertyChanged when the value of TextColour changes or else those other bindings, on the TextBox, will have no way of knowing that anything changed.

WPF ItemsControl - Change focus when item added

I have an ObservableCollectiong<StringWrapper> (StringWrapper per this post) named Paragraphs bound to an ItemsControl whose ItemTemplate is just a TextBox bound to StringWrapper.Text.
XAML
<ItemsControl Name="icParagraphs" Grid.Column="1" Grid.Row="7" ItemsSource="{Binding Path=Paragraphs, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<StackPanel Orientation="Vertical">
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Name="tbParagraph" TextWrapping="Wrap" AcceptsReturn="False" Text="{Binding Path=Text}" Grid.Column="0" KeyUp="tbParagraph_KeyUp" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
C#
public class StringWrapper
{
public string Text { get; set; }
public StringWrapper()
{
Text = string.Empty;
}
public StringWrapper(string text)
{
Text = text;
}
}
I'm trying to make it so when I press enter in a TextBox, I insert a StringWrapper in my ObservableCollection after the StringWrapper bound to the TextBox that's currently focused, which generates a new TextBox. So far, my code does this, though there are a couple glitches to work out.
My question is, how do I then set the focus to the newly generated TextBox? As far as I can tell, the control generation happens after the function that inserts the string returns.
I looked for something like an ItemsControl.ItemsSourceChanged event, but, at least, that name doesn't exist. I also tried attaching a handler to ObservableCollection.CollectionChanged, but that too seemed to fire before the TextBox was generated. Last, since the ItemsControl.Template is a StackPanel, I looked for a StackPanel.ControlAdded event, but couldn't find that either.
Ideas? Thanks!

You may have to handle CollectionChanged and then schedule the focus action to occur in the future using Dispatcher.BeginInvoke with a priority of Loaded. That should give the ItemsControl an opportunity to generate a container and perform layout.

Duplicating the button and adding it to dockpanel in WPF/C#

I am trying to add the button to my DockPanel dynamically. I need to create the same button which exist in my dockpanel.
<Button Name="ImageMoreButton"
DockPanel.Dock="Right"
Command="{Binding LaunchLookup}"
Style="{StaticResource ButtonStyle}"
Margin="2,0,2,0"
Padding="3"
Visibility="{Binding Definition.IsLookupImageButton, Converter={StaticResource boolToVisibilityConverter}}"
IsEnabled="{Binding Locked, Converter={StaticResource invertedBooleanConverter}}">
<Image Name="button_image" Source="search_button_rest.png"/>
</Button>
Here is my C# code.
d.Name = VariableArg.Name + index;
d.Margin = VariableArg.Margin;
item.Command = ImageMoreButton.Command;
item.Style = ImageMoreButton.Style;
item.Name = ImageMoreButton.Name + index;
item.Visibility = ImageMoreButton.Visibility;
item.Padding = ImageMoreButton.Padding;
item.Margin = ImageMoreButton.Margin;
item.IsEnabled = ImageMoreButton.IsEnabled;
item.Height = ImageMoreButton.ActualHeight;
item.Width = ImageMoreButton.ActualWidth;
DockPanel.SetDock(item, Dock.Right);
Let me know if this is the correct way to that.

WPF Controls cannot be added to two different parent controls. If you wish to add a copy of an item at runtime, you need to create a new object entirely, not re-use an existing item.
That said, since your buttons represent a Configuration setting, I would recommend you use something like an ItemsControl that is bound to a collection of data objects, with the Button being used as the ItemTemplate.
For example, suppose you had an ObservableCollection<MySetting> collection called Settings. You could then write the following XAML:
<ItemsControl ItemsSource="{Binding Settings}">
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<DockPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemContainerStyle -->
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="DockPanel.Dock" Value="Right" />
</Style>
</ItemsControl.ItemContainerStyle>
<!-- ItemTemplate -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Command="{Binding DataContext.LaunchLookup, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
Style="{StaticResource ButtonStyle}"
Margin="2,0,2,0"
Padding="3"
Visibility="{Binding Definition.IsLookupImageButton, Converter={StaticResource boolToVisibilityConverter}}"
IsEnabled="{Binding Locked, Converter={StaticResource invertedBooleanConverter}}">
<Image Source="search_button_rest.png"/>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Then to add new items, you would simply add items to the ObservableCollection
Settings.Add(new MySetting());
For other examples using an ItemsControl, check out this post I wrote

If you use this code a lot I suggest you define an extension method on Button class. like this :
public static class ButtonExtension
{
public static Button Clone(this Button myButton, int index)
{
var newButton = new Button
{
Command = myButton.Command,
Style = myButton.Style,
Name = myButton.Name + index,
Visibility = myButton.Visibility,
Padding = myButton.Padding,
Margin = myButton.Margin,
IsEnabled = myButton.IsEnabled,
Height = myButton.ActualHeight,
Width = myButton.ActualWidth
};
return newButton;
}
}
which you can use later like :
var newButton = ImageMoreButton.Clone(index);
DockPanel.SetDock(newButton, Dock.Right);

Talking about "a better way", I recommend you to get faimliar with the MVVM Pattern since it's very powerful in simplifying the UI code. Also, it seems to be a widespread best practice for WPF programming since WPF has great infrastructure for it. There certainly is a learning curve, but once you understand it, you'll solve such puzzles easily. I could provide a sample, but I'm not sure that it would be useful here.
If you need a solution right now, you can use your code, it seems to be fine. But don't forget to add new controls to the parents:
parentPanel.Children.Add(item);