โŒ

Normal view

There are new articles available, click to refresh the page.
Before yesterdayMain stream

WPF button animation on command finished

I have a listView of items in my app, each item has some configuration and save button. MainWindow:

<Grid>
    <ListView ItemsSource="{Binding ItemVmList}"
              SelectedItem="{Binding SelectedItem}"
              Padding="0">
        <ListView.ItemTemplate>
            <DataTemplate DataType="{x:Type local:ItemViewModel}">
                <local:ItemView />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

MainVM:

public class MainViewModel : ViewModelBase
{
    private readonly IItemProvider _itemProvider;

    private readonly ISettingsManager _settingsManager;

    private ItemViewModel _selectedItem;

    public ObservableCollection<ItemViewModel> ItemVmList { get; set; }

    public ItemViewModel SelectedItem
    {
        get => _selectedItem;
        set
        {
            _selectedItem = value;
            OnPropertyChanged(nameof(SelectedItem));
        }
    }

    public MainViewModel(IItemProvider itemProvider, ISettingsManager settingsManager)
    {
        _itemProvider = itemProvider;
        _settingsManager = settingsManager;
        var itemList = _itemProvider.GetItems();
        ItemVmList = new ObservableCollection<ItemViewModel>(
            itemList.Select(x => new ItemViewModel(settingsManager, x)));
        SelectedItem = ItemVmList.First();
    }
}

ItemView:

<Grid Height="50"
      Width="500">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="400" />
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>
    <TextBlock Text="{Binding Name, Mode=OneWay}"
               FontSize="18"
               Grid.Column="0"
               HorizontalAlignment="Center"
               Height="50" />
    <TextBox Grid.Column="1"
             FontSize="18"
             Width="50"
             Height="50"
             VerticalAlignment="Center"
             HorizontalAlignment="Center"
             Text="{Binding Value, Mode=TwoWay}" />
    <Button Width="50"
            Height="50"
            Grid.Column="2">
        Save
    </Button>
</Grid>

ItemVM:

public class ItemViewModel : ViewModelBase
{
    private readonly ISettingsManager _settingsManager;

    private readonly ItemModel _item;

    public string Name
    {
        get { return _item.Name; }
    }

    public int Value
    {
        get { return _item.Value; }
        set
        {
            _item.Value = value;
            OnPropertyChanged(nameof(Value));
        }
    }

    public ItemViewModel(ISettingsManager settingsManager, ItemModel item)
    {
        _settingsManager = settingsManager;
        _item = item;
    }
}

ISettingsManager have here only Save() method.

I want my save button to change style or play animation based on the result of the Save method (if true - green color and red if false). Also it would be good to move command logic from ItemVM if possible. I tried that with command, but I didn't find any way to somehow bind button style to Save() result.

Column Series With different color on a different interval at x-axis fill in same series?

I'm trying to implement a speed/time plot UI, i'm using WPF with the MVVM Pattern and Live-Charts by beto-rodriguez as my plot library. I am using Column Series.

i have two issues: 1) i have to start the series in middle of the x-axis how to do this? e.g if i set the min value as 7 the graph starts the x axis as 7 taking it the first point but i want x - axis to start at 1 but graph plotting should start at 7.

2) i have to change the color of the series at a certain condition say when x= 10 i want it to be shown as blue but when x= 17 i want to show the same series as pink only for that value rest at all points it should be of the original color.

Any Pointers?

'UserControl' is a namespace but is used like a type

this is the code for my CardDay.xaml where i designed the card view for my weather app using WPF framework in which i'm very new and learning

<UserControl x:Class="WeatherApp.UserControl.CardDay"
             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" 
             mc:Ignorable="d" Name="cardDay">
    <Border CornerRadius="10" Width="85" Padding="10" Margin="0 0 10 0" BorderThickness="1">
        <Border.Style>
            <Style TargetType="Border">
                <Setter Property="Background" Value="White"/>
                <Setter Property="BorderBrush" Value="#e9e9e9e9"/>

                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" Value="#03a9f4"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <StackPanel>
            <TextBlock Text="{Binding Path=Day, ElementName=cardDay}" TextAlignment="Center" FontSize="14" FontWeight="SemiBold"/>
            <Image Source="{Binding Path=Source, ElementName=cardDay}" Width="30" Margin="0 10 0 10"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <TextBlock Text="{Binding Path=MaxNum, ElementName=cardDay}" TextAlignment="Center" FontWeight="SemiBold" Margin="0 0 8 0"/>
                <TextBlock Text="{Binding Path=MinNum, ElementName=cardDay}" TextAlignment="Center" FontWeight="SemiBold" Background="#7a7a7a"/>
            </StackPanel>
        </StackPanel>
    </Border>
</UserControl>

and here is the code for CardDay.xaml.cs which i guess work as backend code for my weather app. really don't know much about C# and i'm learning and this is my first time using this language for a project.


using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WeatherApp.UserControl
{

    public partial class CardDay : UserControl
    {
        public CardDay()
        {
            InitializeComponent();
        }


        public string Day
        {
            get { return (string)GetValue(DayProperty); }
            set { SetValue(DayProperty, value); }
        }
        public static readonly DependencyProperty DayProperty = DependencyProperty.Register("Day", typeof(string), typeof(CardDay));



        public string MaxNum
        {
            get { return (string)GetValue(MaxNumProperty); }
            set { SetValue(MaxNumProperty, value); }
        }
        public static readonly DependencyProperty MaxNumProperty = DependencyProperty.Register("MaxNum", typeof(string), typeof(CardDay));


        public string MinNum
        {
            get { return (string)GetValue(MinNumProperty); }
            set { SetValue(MinNumProperty, value); }
        }
        public static readonly DependencyProperty MinNumProperty = DependencyProperty.Register("MinNum", typeof(string), typeof(CardDay));


        public ImageSource Source
        {
            get { return (ImageSource)GetValue(SourceProperty); }
            set { SetValue(SourceProperty, value); }
        }
        public static readonly DependencyProperty SourceProperty = DependencyProperty.Register("Source", typeof(ImageSource), typeof(CardDay));
    }
}

where you'll be able to see the UserControl is red underlined and not working in any other way.

public partial class CardDay : UserControl
{
    public CardDay()
    {
        InitializeComponent();
    }

CardDay: UserControl is showing used as a type how can i solve it ?? really new at this thing

Tried to use the potential fixes but it didn't work.

How to make changes from ObservableObject derived class reflect into interface automatically?

I am using ObservableObject from CommunityToolkit in a WPF program. It looks like this:

It's like a ViewModel, I think:

public class MyParameters: ObservableObject
{
    // many other values are here
    public double ValAngleDegrees { get; set;}
}

A control looks like this:

<StackPanel x:Name="AnglePanel" Orientation="Horizontal" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2">
   <TextBox Name="TxtAngleDeg" Width="100" Margin="2" Text="{Binding Path=ValAngleDegrees, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}" KeyUp="TxtAngleDeg_KeyUp"></TextBox>
</StackPanel>

I initialize it like this:

public MyParameters renderValues { get; set; }
public MainWindow()
{
    InitializeComponent();
    renderValues = new MyParameters { ValAngleDegrees = 0 };
    AnglePanel.DataContext = renderValues;
}

When I change value in textbox, value in ObservableObject is changed like expected, BUT THE PROBLEM IS - when I change value in code it does not get changed in UI. How do I solve this?

WPF. How to wrap two ItemsControlยดs using same row?

Abstracting, I have two (main) ItemsControl's that draw their content in a wrapping way.
I use WrapPanel etc.
This works well so far. Also in case the window size is changed during runtime.

But I would like to achieve is this:
Imagine first ItemsControl draws 20 items using two rows.
In terms of width, the first row is fully utilized (= "0_xxxx" ... "13_xxxx")
while only (e.g.) 40 % of the second row is used (= "14_xxxx" ... "19_xxxx").

The second ItemsControl starts drawing its content in the (visually counted!) 3rd line.
It therefore does not use the 60% of row 2 (= "14_xxxx" ... "19_xxxx").

ItemsControl #2 should start where ItemsControl #1 has ended.

The following image shows the CURRENT, "wrong" state

enter image description here https://github.com/UweR70/Images/blob/main/WPF_Test_App/2024_04_07__09_03_00.png

The complete code can be found here

https://github.com/UweR70/WPF_Test_App

WPF StringFormat on Label Content

I want to format my string binding as Amount is X where X is a property bound to a label.

I've seen many examples but the following doesn't work:

<Label Content="{Binding Path=MaxLevelofInvestment, 
   StringFormat='Amount is {0}'}" />

I've also tried these combinations:

StringFormat=Amount is {0}
StringFormat='Amount is {}{0}'
StringFormat='Amount is \{0\}'

I even tried changing the binding property's datatype to int, stringand double. Nothing seems to work. This is a very common use case but doesn't seem to be supported.

C# WPF Custom Titlebar & Animations

I am making an application in C# WPF Application. I am making a custom title bar after figuring out it the UI would be cleaner that way (basically ExtendsContentIntoTitleBar on WINUI). I know how to have the original buttons, and right click context menu. I could not figure out how to restore the original window animations, original tooltips and the snap layout when you hover on win 11 (somewhat yellowish color, happens when you hover over the button long enough). I was able to use animations when I had WindowStyle="SingleBorderWindow" and ResizeMode="CanMinimize", however I would like to have the window remain resizable. Is there anyway to accomplish this?

Examples of things I want to keep/accomplish. Snap Layout + Hover TipsWin11 Snap Layout

I have tried WindowStyle="SingleBorderWindow" and ResizeMode="CanMinimize", this got animations back however, I want the window to be resizable. The MahApps.Metro Demo has exactly what I want, however I do not want to install it. The animations missing are minimizing, maximizing, and closing.

Update: Animations are working. I need to figure out the ControlzEx Demo and MahApps.Metro Demo magic as to how to restore the windows 11 snap layout when hovering over maximize button. I included example picture.

Animate two objects, at the same timeline. One after another. WPF

How can I animate the opacity of two objects, at the same timeline, but in different intervals?

I was expecting the two text elements, to fade in gradually, from one textbox to another. Instead, The text appears out of sync and, it flashes in and out.


    <Window x:Class="Hello_world.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:Hello_world"
        mc:Ignorable="d"
        Title="Hello world with WPF" Height="450" Width="800">
    <Grid Background="Black">
        

        <TextBlock Name="primary_adverb" HorizontalAlignment="Left" Margin="184,161,0,0" TextWrapping="Wrap" Text="Hello world." VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="Red">
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="primary_adverb"
                                Storyboard.TargetProperty="Opacity"                 
                                From="0" To="2" Duration="0:0:10" BeginTime="0:0:1"
                            />

                            

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
        
        <TextBlock Name="Noir_N" HorizontalAlignment="Left" Margin="184,217,0,0" TextWrapping="Wrap" Text="N" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke">
            <TextBlock.Triggers>
            <EventTrigger RoutedEvent="TextBlock.Loaded">
                <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="Noir_N"
                                Storyboard.TargetProperty="Opacity"                 
                                From="2" To="3" Duration="0:0:10" BeginTime="0:0:5"
                            />
                        </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>           
        </TextBlock>
        <TextBlock Name="Noir_O" HorizontalAlignment="Left" Margin="319,217,0,0" TextWrapping="Wrap" Text="O" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke" Width="43"/>
        <TextBlock Name="Noir_I" HorizontalAlignment="Left" Margin="455,217,0,0" TextWrapping="Wrap" Text="I" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke" Width="42"/>
        <TextBlock Name="Noir_R" HorizontalAlignment="Left" Margin="616,217,0,0" TextWrapping="Wrap" Text="R" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke" Width="42"/>

    </Grid>
</Window>

How to show multiple binded entries in a WPF TextBox?

As explained in some previous questions, I have a ComboBox and a TextBox.
The ComboBox allows me to choose an object and the TextBox shows me information about that chosen object.

It all looks as follows:

<ComboBox x:Name="Cmb_MPNr" 
          ItemsSource="{Binding ActivePallets}"
          SelectedItem="{Binding Unit, Mode=TwoWay}"
          SelectedValue="{Binding Unit.MPNr, Mode=TwoWay}"
          SelectedValuePath="MPNr"
          IsTextSearchEnabled="True"
          TextSearch.TextPath="MPNr"
          IsEditable="True">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding MPNr}"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

<TextBox Name="Txt_PO" Grid.Row="0" Grid.Column="2" IsEnabled="False">
    <TextBox.Text>
        <MultiBinding StringFormat="{}{0} - {1}">
            <Binding Path="SelectedItem.PO" ElementName="Cmb_MPNr" />
            <Binding Path="SelectedItem.Description" ElementName = "Cmb_MPNr" />
        </MultiBinding>
    </TextBox.Text>
</TextBox>

As I'm having some troubles with that, I though of simplifying the TextBox. I mean, instead of referring to another visual control, verify its behaviour (which leads to the assignment of a variable), and then checking the resulting action of that behaviour while completely ignoring that variable, just use that variable!!!

Point is: how to do that?
This looked to me like the easiest solution, but it does not work.
How can I simply tell the TextBox to show {0} - {1}, combining PO and Description of the binded variable Unit?
My effort (one of them):

<TextBox Name="Txt_PO" Grid.Row="0" Grid.Column="2" IsEnabled="False">
    <TextBox.Text>
        <MultiBinding StringFormat="{}{0} - {1}">
            <Binding Path="Unit.PO"/>
            <Binding Path="Unit.Description"/>
        </MultiBinding>
    </TextBox.Text>
</TextBox>

How do I migrate a WPF app to Blazor Hybrid?

I'm doing research on whether migrating a WPF app to Blazor Hybrid is possible via the help of tools or in an as efficient way possible. The app I need to migrate is an older WPF application that started development in 2009 and is currently on .NET Framework version 4.5. The goal is to document different migration steps and strategies. It's really difficult to find concrete steps, tips, documentation or anything really useful in general and I've never come into contact with software migration so it's a bit new to me.

I have found 4 possibilities, or at least approaches to consider for the XAML-code.

  1. Converting to HTML
  2. Converting to MAUI
  3. Somehow converting to a mix of both HTML en MAUI (taking advantage of the Hybrid aspect)
  4. Directly integrating the WPF-XAML (https://xaml-for-blazor.com/)

The C# code behind will also be migrated afterwards. For that I was thinking of upgrading everything to .NET Standard.

Any tips or insights are very welcome. If there's a tool I can consider using or another way I could go about migrating I, please do let me know as well. If I have been unclear with my explenation at any point, feel free to also tell me. Thanks in advance!

โŒ
โŒ