Unterstützung bei erstellung von Guten Styles (CountryChooser)

  • WPF

Es gibt 7 Antworten in diesem Thema. Der letzte Beitrag () ist von asusdk.

    Unterstützung bei erstellung von Guten Styles (CountryChooser)

    Hallo Ihr Lieben,

    unter dem Thread : CountryChooser(per flag) - WPF und verwandte Technologien - VB-Paradise 2.0 — Die große Visual–Basic– und .NET–Community (vb-paradise.de) habe ich eine Menge Hilfe bekommen, und ansich funktioniert nun alles wie gewünscht. Dank @ErfinderDesRades ist der Code nun deutlich kürzer und übersichtlicher, und ich habe dabei auch das ein oder andere gelernt.

    Jetzt jedoch geht es mir darum wie man ein Usercontrol anständig designt, natürlich findet man, dann Hinweise auf Styles, oder gar Templates, jedoch tun sich mir hierbei folgende Gedanken und Probleme auf:
    Wo kann man denn z.B. fertige Templates/Styles herbekommen, so das man mal sieht wie z.B. ein Anständiger HoverEffect umgesetzt wird ? Ich mein klar, man könnte auch einfach ein einzelnes Element als Bild laden, und beim MouseOver ein anderes Anzeigen, aber ich denke mal das die WPF noch tonnen an anderen Möglichkeiten bietet, die mir einfach nicht bekannt sind, kein Plan, ich nehme mal an ein GlowEffect oder dergleichen. Ich würde den CountryChooser einfach sehr gerne richtig anständig Designen, das Ausgewählte Item sollte in irgendeiner Art hervorgehoben werden, beim MouseOver hätte ich auch sehr gerne einen Effect, aber mir fehlen hierbei sowohl die Ideen, als auch die richtigen Quellen um nachzulesen, welche Möglichkeiten es ansich gibt, bei Tutorials wird meist nur ganz simples Zeug getrieben, wie z.B. TextFarbe und Größe, so komme ich jedoch nicht dahinter welche Möglichkeiten es sonst noch alles gibt.

    Des Weiteren bin ich mir unsicher, ob der gewählte Ansatz, mit einer Listbox und einem DataTemplate der Richtige ist, oder ob es hier eine sinnvollere Lösung gibt, denn so z.B. kam ich bisher nicht dahinter, wie ich ein selectiertes Item in der Listbox hervorheben kann.


    Das eigentliche UserControl:
    Spoiler anzeigen

    XML-Quellcode

    1. <UserControl x:Class="CountryFlagChooser"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    6. xmlns:local="clr-namespace:Advanced_Invoice_Helper"
    7. mc:Ignorable="d"
    8. VisualTextRenderingMode="ClearType"
    9. RenderOptions.BitmapScalingMode="Fant"
    10. Background="Transparent"
    11. d:DataContext="{Binding AvailableCountries, Source={x:Static local:MainViewModel.Instance}}"
    12. >
    13. <UserControl.Resources>
    14. <DataTemplate DataType="{x:Type local:CountryViewModel}">
    15. <local:CountrySingleView/>
    16. </DataTemplate>
    17. </UserControl.Resources>
    18. <Viewbox Stretch="Fill">
    19. <ListBox ItemsSource="{Binding }"
    20. Background="Transparent" IsSynchronizedWithCurrentItem="True">
    21. <ListBox.ItemsPanel>
    22. <ItemsPanelTemplate>
    23. <StackPanel Orientation="Horizontal"/>
    24. </ItemsPanelTemplate>
    25. </ListBox.ItemsPanel>
    26. </ListBox>
    27. </Viewbox>
    28. </UserControl>



    Das SingleItemUserControl:
    Spoiler anzeigen

    XML-Quellcode

    1. <UserControl x:Class="CountrySingleView"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    6. xmlns:local="clr-namespace:Advanced_Invoice_Helper"
    7. mc:Ignorable="d"
    8. d:DataContext="{Binding Path= AvailableCountries/, Source={x:Static local:MainViewModel.Instance}}"
    9. Height="Auto"
    10. Width="Auto">
    11. <Image Grid.Row="0"
    12. RenderOptions.BitmapScalingMode="Fant"
    13. Stretch="UniformToFill"
    14. Source="{Binding CountryFlagImageUri}"
    15. ToolTip="{Binding CountryName}"
    16. Margin="25,0">
    17. <Image.RenderTransform>
    18. <ScaleTransform CenterX="0.5" CenterY="0.5"/>
    19. </Image.RenderTransform>
    20. <Image.Style>
    21. <Style TargetType="{x:Type Image}">
    22. <Style.Triggers>
    23. <Trigger Property="IsMouseOver" Value="True">
    24. <Trigger.EnterActions>
    25. <BeginStoryboard>
    26. <Storyboard>
    27. <DoubleAnimation Storyboard.TargetProperty="(Image.RenderTransform).(ScaleTransform.ScaleY)"
    28. From="1"
    29. To="0.50"
    30. Duration="0:0:0.3"
    31. FillBehavior="Stop"/>
    32. </Storyboard>
    33. </BeginStoryboard>
    34. </Trigger.EnterActions>
    35. </Trigger>
    36. </Style.Triggers>
    37. </Style>
    38. </Image.Style>
    39. </Image>
    40. </UserControl>





    Was ich mich z.B. auch Frage ist, wieso das "Image" nach oben und nach unten, immer diesen unnötigen leeren Platz aufweist, unabhängig davon welche Fillmethode ich verwende oder was ich auch versucht habe, das Image scheint immer Quadratisch zu sein/bleiben, statt nur die notwendige Höhe zu verwenden, versucht habe ich hierbei auch, alles in eine ViewBox zu packen, ein Grid, und ein Stackpanel, der unnötige Platz bleibt immer erhalten.

    Auch bin ich noch nicht dahinter gekommen, wie ich eben das in der Listbox selectierte Item anders hervorheben kann, besonders auch dann, wenn das Control gerade garnicht den Focus hat. Da scheint es Momentan nur leicht grau hervorgehoben zu sein.

    Ihr seht sicher, dass ich momentan nicht mehr weiter weis, evtl. kann mir jemand Vorschläge geben, wie ich das Anständig hinbekommen könnte?


    Vielen Lieben Dank schonmal
    AsusDK
    If Energy = Low Then
    Drink(aHugeCoffee)
    Else
    Drink(aHugeCoffeeToo)
    End If
    Hab mal danach gegoogelt, aber da kommt man ja auch nur an den Default style dran ohne erklätung was, davon für was zuständig ist, habs jetzt gelöst mit dem NuggetPackage "GitHub - Kinnara/ModernWpf: Modern styles and controls for your WPF applications"



    Danke dir =)
    If Energy = Low Then
    Drink(aHugeCoffee)
    Else
    Drink(aHugeCoffeeToo)
    End If
    Hallo

    asusdk schrieb:

    aber mir fehlen hierbei sowohl die Ideen, als auch die richtigen Quellen um nachzulesen

    In meinem Tutorial zu ControlsStyles zeige ich sogar wie man ein Template eines Controls bekommt und dieses dann abändert, die Kreativität liegt dann aber natürlich wieder an dir.
    Wenn du Teile des Templates nicht verstehst oder keine Ahnung hast wofür die sind kannst du dich hier gerne malden, der großteil ist aber denke ich selbsterklärend.

    asusdk schrieb:

    denn so z.B. kam ich bisher nicht dahinter, wie ich ein selectiertes Item in der Listbox hervorheben kann.

    Eine Listbox bringt diese Funktionalität aber doch von selbst mit, da musste nicht ändern. Soll es nicht "die standardselektion" in diesem blau sein muss den ItemContainerStyle der Listbox abändern.
    So kannst selbst bestimmen wie ein selektiertes Item aussehen soll.

    XML-Quellcode

    1. <UserControl.Resources>
    2. <Style x:Key="AsusLBStyle" TargetType="{x:Type ListBoxItem}">
    3. <Style.Resources>
    4. <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
    5. Color="Transparent"/>
    6. </Style.Resources>
    7. </Style>
    8. </UserControl.Resources>


    XML-Quellcode

    1. <ListBox ItemsSource="{Binding Path=FirstNames}"
    2. ItemContainerStyle="{StaticResource AsusLBStyle}">


    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Hey @Nofear23m

    Ich weiss nciht ob dafür ein neuer Thread hersollte,
    aber bei meinem UCL

    Spoiler anzeigen

    XML-Quellcode

    1. ​<UserControl.Resources>
    2. <DataTemplate DataType="{x:Type local:CountryViewModel}">
    3. <Image Grid.Row="0"
    4. RenderOptions.BitmapScalingMode="Fant"
    5. Source="{Binding CountryFlagImageUri}"
    6. ToolTip="{Binding CountryName}"
    7. Stretch="UniformToFill"/>
    8. </DataTemplate>
    9. </UserControl.Resources>
    10. <Viewbox Stretch="Fill">
    11. <ListBox ItemsSource="{Binding }"
    12. Background="Transparent" IsSynchronizedWithCurrentItem="True">
    13. <ListBox.ItemContainerStyle>
    14. <Style TargetType="{x:Type ListBoxItem}">
    15. <Setter Property="SnapsToDevicePixels" Value="true"/>
    16. <Setter Property="Template">
    17. <Setter.Value>
    18. <ControlTemplate TargetType="ListBoxItem">
    19. <Border Name="Border" Padding="7"
    20. SnapsToDevicePixels="True"
    21. Background="{TemplateBinding Background}"
    22. BorderThickness="0">
    23. <ContentPresenter/>
    24. </Border>
    25. <ControlTemplate.Triggers>
    26. <Trigger Property="IsSelected" Value="true">
    27. <Setter TargetName="Border" Property="Background" Value="Gray"/>
    28. </Trigger>
    29. <Trigger Property="IsEnabled" Value="false">
    30. <Setter Property="Foreground" Value="Green"/>
    31. </Trigger>
    32. <Trigger Property="IsMouseOver" Value="True">
    33. <Trigger.EnterActions>
    34. <BeginStoryboard>
    35. <Storyboard>
    36. <DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"
    37. From="1"
    38. To="0.50"
    39. Duration="0:0:0.6"
    40. FillBehavior="Stop"/>
    41. </Storyboard>
    42. </BeginStoryboard>
    43. </Trigger.EnterActions>
    44. </Trigger>
    45. </ControlTemplate.Triggers>
    46. </ControlTemplate>
    47. </Setter.Value>
    48. </Setter>
    49. </Style>
    50. </ListBox.ItemContainerStyle>
    51. <ListBox.ItemsPanel>
    52. <ItemsPanelTemplate>
    53. <StackPanel Orientation="Horizontal"/>
    54. </ItemsPanelTemplate>
    55. </ListBox.ItemsPanel>
    56. </ListBox>
    57. </Viewbox>
    58. </UserControl>


    scheitere ich aktuel an der Animation beim MouseOver, siehst du evtl. was ich hier falsch mache ?

    XML-Quellcode

    1. <Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"From="1"To="0.50"Duration="0:0:0.6"FillBehavior="Stop"/></Storyboard></BeginStoryboard></Trigger.EnterActions></Trigger>
    If Energy = Low Then
    Drink(aHugeCoffee)
    Else
    Drink(aHugeCoffeeToo)
    End If
    Hallo

    asusdk schrieb:

    scheitere ich aktuel an der Animation beim MouseOver

    Was genau passiert oder eben nicht?
    Etwas Info hilf meißt.

    Was mir auffällt: Du hast ein BeginStoryBoard aber kein ExitStoryboard, du musst ja die Animation wieder zurück machen wenn die Mouse wieder das Item verlässt.

    Grüße
    Sascha
    If _work = worktype.hard Then Me.Drink(Coffee)
    Seht euch auch meine Tutorialreihe <WPF Lernen/> an oder abonniert meinen YouTube Kanal.

    ## Bitte markiere einen Thread als "Erledigt" wenn deine Frage beantwortet wurde. ##

    Es passiert lediglich garnichts, als würde der Trigger nicht ziehen, oder der Code des Storyboards nicht ausgeführt.

    Wo sollte das Exitstoryboard denn hin? Ich habe das bisher in keinem Tutorial irgendwo gefunden, auch das hier verwendete Beispiel ist aus dem Netz, und hatte, als ich es dem Image zugeordnet hatte, auch funktioniert, (Post 1, Spoiler 2)

    Nachtrag, auch dem Border schon vorab ein Rendertransform zu verpassen bringt keine Abhilfe:

    XML-Quellcode

    1. <Border.RenderTransform>
    2. <ScaleTransform CenterX="0.5" CenterY="0.5"/>
    3. </Border.RenderTransform>





    Nachtrag:
    Habs hinbekommen =)

    Spoiler anzeigen

    XML-Quellcode

    1. ​<UserControl x:Class="CountryFlagChooser"
    2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    5. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    6. xmlns:local="clr-namespace:Advanced_Invoice_Helper"
    7. mc:Ignorable="d"
    8. VisualTextRenderingMode="ClearType"
    9. RenderOptions.BitmapScalingMode="Fant"
    10. Background="Transparent"
    11. d:DataContext="{Binding AvailableCountries, Source={x:Static local:MainViewModel.Instance}}"
    12. >
    13. <UserControl.Resources>
    14. <DataTemplate DataType="{x:Type local:CountryViewModel}">
    15. <Image RenderOptions.BitmapScalingMode="Fant"
    16. Source="{Binding CountryFlagImageUri}"
    17. ToolTip="{Binding CountryName}"
    18. Stretch="Uniform"
    19. Margin="25"/>
    20. </DataTemplate>
    21. </UserControl.Resources>
    22. <Viewbox Stretch="Fill">
    23. <ListBox ItemsSource="{Binding }"
    24. Background="Transparent"
    25. IsSynchronizedWithCurrentItem="True">
    26. <ListBox.ItemContainerStyle>
    27. <Style TargetType="{x:Type ListBoxItem}">
    28. <Setter Property="SnapsToDevicePixels" Value="true"/>
    29. <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
    30. <Setter Property="RenderTransform">
    31. <Setter.Value>
    32. <ScaleTransform/>
    33. </Setter.Value>
    34. </Setter>
    35. <Setter Property="Template">
    36. <Setter.Value>
    37. <ControlTemplate TargetType="ListBoxItem">
    38. <Border Name="Border" Padding="7"
    39. SnapsToDevicePixels="True"
    40. Background="{TemplateBinding Background}"
    41. BorderThickness="0">
    42. <ContentPresenter/>
    43. </Border>
    44. <ControlTemplate.Triggers>
    45. <Trigger Property="IsSelected" Value="true">
    46. <Setter TargetName="Border"
    47. Property="Background"
    48. Value="#FF2E2E2E"/>
    49. </Trigger>
    50. <Trigger Property="IsMouseOver" Value="True">
    51. <Trigger.EnterActions>
    52. <BeginStoryboard>
    53. <Storyboard>
    54. <DoubleAnimation Storyboard.TargetProperty="(ListBoxItem.RenderTransform).(ScaleTransform.ScaleY)"
    55. From="1"
    56. To="0.8"
    57. Duration="0:0:0.3"/>
    58. </Storyboard>
    59. </BeginStoryboard>
    60. </Trigger.EnterActions>
    61. <Trigger.ExitActions>
    62. <BeginStoryboard>
    63. <Storyboard>
    64. <DoubleAnimation Storyboard.TargetProperty="(ListBoxItem.RenderTransform).(ScaleTransform.ScaleY)"
    65. From="0.8"
    66. To="1"
    67. Duration="0:0:0.6"/>
    68. </Storyboard>
    69. </BeginStoryboard>
    70. </Trigger.ExitActions>
    71. </Trigger>
    72. </ControlTemplate.Triggers>
    73. </ControlTemplate>
    74. </Setter.Value>
    75. </Setter>
    76. </Style>
    77. </ListBox.ItemContainerStyle>
    78. <ListBox.ItemsPanel>
    79. <ItemsPanelTemplate>
    80. <StackPanel Orientation="Horizontal"/>
    81. </ItemsPanelTemplate>
    82. </ListBox.ItemsPanel>
    83. </ListBox>
    84. </Viewbox>
    85. </UserControl>

    If Energy = Low Then
    Drink(aHugeCoffee)
    Else
    Drink(aHugeCoffeeToo)
    End If

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „asusdk“ ()