Pope
Pope
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
<UserControl x:Class="Wpf.Sandbox.ButtonColorCollectionTest.ButtonColorCollectionView"
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:buttonColorCollectionTest="clr-namespace:Wpf.Sandbox.ButtonColorCollectionTest"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance Type=buttonColorCollectionTest:ButtonColorCollectionViewModel}" >
<Grid>
<!-- what I just shared -->
</Grid>
</UserControl>
<UserControl x:Class="Wpf.Sandbox.ButtonColorCollectionTest.ButtonColorCollectionView"
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:buttonColorCollectionTest="clr-namespace:Wpf.Sandbox.ButtonColorCollectionTest"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance Type=buttonColorCollectionTest:ButtonColorCollectionViewModel}" >
<Grid>
<!-- what I just shared -->
</Grid>
</UserControl>
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type buttonColorCollectionTest:ButtonItemViewModel}">
<Border CornerRadius="15" Cursor="Hand">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{Binding ButtonBackground}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Magenta"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Button Width="120" Height="50"
Margin="5"
Command="{Binding ClickedButtonCommand}"
Content="{Binding ButtonText}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</Button.Style>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Buttons}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type buttonColorCollectionTest:ButtonItemViewModel}">
<Border CornerRadius="15" Cursor="Hand">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{Binding ButtonBackground}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Magenta"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Button Width="120" Height="50"
Margin="5"
Command="{Binding ClickedButtonCommand}"
Content="{Binding ButtonText}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</Button.Style>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
public partial class ButtonColorCollectionView
{
public ButtonColorCollectionView() => InitializeComponent();
}

public partial class ButtonColorCollectionViewModel : ObservableObject
{
public ObservableCollection<ButtonItemViewModel> Buttons { get; } = [];
private readonly DispatcherTimer _timer;
public ButtonColorCollectionViewModel()
{
for (var i = 0; i < 12; i++) { Buttons.Add(new ButtonItemViewModel { ButtonText = $"{i}- Click Me", }); }
_timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1), };
_timer.Tick += Timer_Tick;
_timer.Start();
}
private void Timer_Tick(object? sender, EventArgs e)
{
var buttonsToPick = Random.Shared.Next(1, 4);
foreach (var button in Buttons.OrderBy(_ => Random.Shared.Next()).Take(buttonsToPick)) { button.ClickedButtonCommand.Execute(null); }
}
}

public partial class ButtonItemViewModel : ObservableObject
{
private static readonly SolidColorBrush GoodColor = Brushes.LimeGreen;
private static readonly SolidColorBrush BadColor = Brushes.Crimson;

[ObservableProperty] private SolidColorBrush _buttonBackground = Brushes.LightGray;
[ObservableProperty] private string _buttonText = "Click me!";
[RelayCommand] private void ClickedButton() => ButtonBackground = Random.Shared.NextDouble() < 0.5 ? GoodColor : BadColor;
}
public partial class ButtonColorCollectionView
{
public ButtonColorCollectionView() => InitializeComponent();
}

public partial class ButtonColorCollectionViewModel : ObservableObject
{
public ObservableCollection<ButtonItemViewModel> Buttons { get; } = [];
private readonly DispatcherTimer _timer;
public ButtonColorCollectionViewModel()
{
for (var i = 0; i < 12; i++) { Buttons.Add(new ButtonItemViewModel { ButtonText = $"{i}- Click Me", }); }
_timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1), };
_timer.Tick += Timer_Tick;
_timer.Start();
}
private void Timer_Tick(object? sender, EventArgs e)
{
var buttonsToPick = Random.Shared.Next(1, 4);
foreach (var button in Buttons.OrderBy(_ => Random.Shared.Next()).Take(buttonsToPick)) { button.ClickedButtonCommand.Execute(null); }
}
}

public partial class ButtonItemViewModel : ObservableObject
{
private static readonly SolidColorBrush GoodColor = Brushes.LimeGreen;
private static readonly SolidColorBrush BadColor = Brushes.Crimson;

[ObservableProperty] private SolidColorBrush _buttonBackground = Brushes.LightGray;
[ObservableProperty] private string _buttonText = "Click me!";
[RelayCommand] private void ClickedButton() => ButtonBackground = Random.Shared.NextDouble() < 0.5 ? GoodColor : BadColor;
}
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
I missed your question in #chat because someone posted a link after your question and I focused on that. I usually look at #gui whenever there's a new message and help with easy questions.
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
I'm going to sleep now. Questions like this are better suited for #gui , but responses are slower.
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
I'd end up doing something gnarly and shitty. It's more XAML than I care to maintain, so I'd push back on it.
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
Doing that is too complicated for me.
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
my trigger for the buttonBackground doesn't work in the xaml shown above
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
so I had to move where I was originally coloring the Border's background to be in a Style like you have it.
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
No description
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
This allows the border to be magenta'd when it's hovered over
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type buttonColorCollectionTest:ButtonItemViewModel}">
<Border CornerRadius="15" Cursor="Hand">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{Binding ButtonBackground}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Magenta"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Button Width="120" Height="50"
Margin="5"
Command="{Binding ClickedButtonCommand}"
Content="{Binding ButtonText}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Magenta"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type buttonColorCollectionTest:ButtonItemViewModel}">
<Border CornerRadius="15" Cursor="Hand">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="{Binding ButtonBackground}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Magenta"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Button Width="120" Height="50"
Margin="5"
Command="{Binding ClickedButtonCommand}"
Content="{Binding ButtonText}">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="2"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Magenta"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
ok. I made a small change in my ItemTemplate
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
No description
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
I think maybe you have a bunch of hard-coded xaml for each button you need, right?
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
I saw the opening tags of the xaml, but not the ending
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
No description
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
or is everything just in a Border?
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
I think you should show the full code for one item. I'm not sure how it's set up.
120 replies
CC#
Created by pauliology on 4/26/2025 in #help
Fancy Button color change.
Ahh, ok.
120 replies