Hello. Such a question is how best (criteria: correctness, speed while the program is running) do UI (CheckBox, ProgressBar, ScrollBar, TabControl) like in the picture below? I mean, what's better: just create a user control and load animations on it? or make your style for each type of control? but I don’t know about creating my own style for each one, because style changes only standard parameters of the type: Font, margin, padding, etc. the more I do not know how to attach animation to the style. But about creating a custom control, it is a pity that there is no import of blanks from photoshop as it was in the old versions of VisualStudio and you have to puff. Please advise how best to do. enter image description here

    1 answer 1

    In <Style/> for most controls, you can also define <ControlTamplate/> and there, based on other controls, you can redo controls.

    An example (right there and see the animation):

     <Style x:Key="button_ellipse" TargetType="{x:Type Button}"> <Style.Setters> <Setter Property="Background"> <Setter.Value> <SolidColorBrush Color="DimGray" Opacity="0.1"/> </Setter.Value> </Setter> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="Height" Value="32"/> <Setter Property="HorizontalAlignment" Value="Center"/> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="SnapsToDevicePixels" Value="True"/> <Setter Property="Width" Value="32"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Ellipse x:Name="ellipse" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="0.25"/> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard Storyboard.TargetName="ellipse"> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetProperty="Fill.Color" To="Black"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard Storyboard.TargetName="ellipse"> <ColorAnimation Duration="0:0:0.1" Storyboard.TargetProperty="Fill.Color" To="DimGray"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> <Trigger Property="IsPressed" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard Storyboard.TargetName="ellipse"> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetProperty="StrokeThickness" To="0.5"/> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> <Trigger.ExitActions> <BeginStoryboard> <Storyboard Storyboard.TargetName="ellipse"> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetProperty="StrokeThickness" To="0.25"/> </Storyboard> </BeginStoryboard> </Trigger.ExitActions> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters> </Style>

    User controls are harder, but this method has more flexibility. So I advise and read it.

    In my experience, in 95% of cases, simple Style was enough ...

    • Well, how do you think I can remake all the controls from the image using only Style? What scares me the most is the tabcontrol, progressbar and scrollbar, but I can redo any button and checkbox on the lighter - alex-rudenkiy
    • @ alex-rudenkiy, without any doubts, they have all the necessary styles to implement such controls. The tab controls, the progress of the bar, and the scroll bar make quite large styles and are difficult to understand for a beginner, but with experience everything will come. I could share with you the written styles for TabControl and ScrollBar. - Arthur Edgarov
    • If only you shared, I would be very grateful to you :) - alex-rudenkiy
    • @ alex-rudenkiy, Here , in one file, styles, in another brush for styles. - Arthur Edgarov
    • Thank you so much, I will come home and see))) - alex-rudenkiy