none
UWP Button / CheckBox Style

    Frage

  • Hallo, 

    ich möchte einen Button/Checkbox der wie folgt aussieht. 

    Habe versucht im Button ein Element zu platzieren, welches ich dann je nach bedarf ein/ausblende. 

    Aber irgendwie bekomme ich das Element nicht richtig platziert. 


      <Button Width="48" Height="48" 
                            Background="Red"  
                            HorizontalContentAlignment="Right"
                            VerticalContentAlignment="Top">
                <Button.ContentTemplate>
                    <DataTemplate>
                        <StackPanel Width="48" Height="48">
                            <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE73E;" FontSize="10"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </Button.ContentTemplate>
            </Button>


    PS: Gabs hier nicht mal die Möglichkeit Code einzufügen? Oder poste ich schon wieder im falschen forum :) 


    • Bearbeitet elTorito Mittwoch, 11. Oktober 2017 07:45
    Mittwoch, 11. Oktober 2017 07:44

Alle Antworten

  • Hi, ich denke du musst beim Button das Default-Style überschreiben/anpassen.

    Bei einer CheckBox sieht das ähnlich aus, schätze den Aufwand aber geringer. Hier mal schnell etwas gebastelt:

    <ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    		<Border BorderBrush="{TemplateBinding BorderBrush}" 
    				BorderThickness="{TemplateBinding BorderThickness}" 
    				Background="{TemplateBinding Background}">
    
    			<VisualStateManager.VisualStateGroups>
    				<VisualStateGroup x:Name="CheckStates">
    					<VisualState x:Name="Checked">
    						<VisualState.Setters>
    							<Setter Target="CheckGlyph.Opacity" Value="1"/>
    							<Setter Target="CBorder.Visibility" Value="Visible"/>
    						</VisualState.Setters>
    					</VisualState>
    					<VisualState x:Name="Unchecked"/>
    					<VisualState x:Name="Indeterminate">
    						<VisualState.Setters>
    							<Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
    							<Setter Target="CBorder.Visibility" Value="Visible"/>
    						</VisualState.Setters>
    					</VisualState>
    				</VisualStateGroup>
    			</VisualStateManager.VisualStateGroups>
    
    			<Grid>
    				<Grid.RowDefinitions>
    					<RowDefinition Height="*"/>
    					<RowDefinition Height="25"/>
    				</Grid.RowDefinitions>
    				<Rectangle HorizontalAlignment="Right" VerticalAlignment="Top" x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20" 
    						   Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
    						   StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" 
    						   UseLayoutRounding="False"/>
    				
    				<Path x:Name="CheckGlyph" HorizontalAlignment="Right" VerticalAlignment="Top"
    					  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z" 
    					  Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
    					  FlowDirection="LeftToRight" Margin="0,3,2,0"
    					  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
    				<Ellipse x:Name="IndeterminateGlyph" HorizontalAlignment="Right" VerticalAlignment="Top" 
    						 Fill="{ThemeResource CheckBoxForegroundThemeBrush}" 
    						 Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
    				<ContentPresenter x:Name="ContentPresenter" 
    								  ContentTemplate="{TemplateBinding ContentTemplate}" 
    								  Content="{TemplateBinding Content}" 
    								  Margin="{TemplateBinding Padding}" Grid.Row="1" 
    								  HorizontalAlignment="Center" 
    								  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    				<Rectangle x:Name="CBorder" Visibility="Collapsed" StrokeThickness="2" Stroke="{ThemeResource CheckBoxForegroundThemeBrush}" Grid.RowSpan="2"/>
    			</Grid>
    		</Border>
    	</ControlTemplate>

    Gruß, Stefan


    Freiberufler im Bereich Softwareentwicklung Von der PLC und Robotik zu VB.NET & C#, vorrangig WPF und UWP


    Mittwoch, 11. Oktober 2017 11:03
  • Hallo,

    eigentlich recht einfach.

    <Button Padding="0" Width="48" Height="48" BorderThickness="0">
            <Grid Width="48" Height="48" Background="DodgerBlue">
                <TextBlock HorizontalAlignment="Right" Foreground="White" Text="&#xE001;" FontFamily="Segoe MDL2 Assets" />
            </Grid>
        </Button>

    Ich würde aber ein GridView nehmen und an diesem eine Liste binden. Dann kann man sich den Button auch sparen

    <UserControl
        x:Class="StoreListings.UC.CustomButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:StoreListings.UC"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
    
        <Grid>
            <GridView IsItemClickEnabled="True" ItemClick="GridView_ItemClick" ItemsSource="{x:Bind ViewModel}">
                <GridView.ItemTemplate>
                    <DataTemplate x:DataType="local:MyListViewModel">
                        <Grid Width="48" Height="48" Background="{x:Bind Color}">
                            <Border Width="48" Height="48" BorderBrush="White" BorderThickness="1" Visibility="{x:Bind BorderVisibility, Mode=TwoWay}">
                                <TextBlock HorizontalAlignment="Right" Foreground="White" Text="&#xE73D;" FontFamily="Segoe MDL2 Assets" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </Grid>
        
    </UserControl>
    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.ComponentModel;
    using System.IO;
    using System.Linq;
    using System.Runtime.CompilerServices;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
    
    namespace StoreListings.UC
    {
        public class MyListViewModel : INotifyPropertyChanged
        {
            public Brush Color { get; set; }
    
            Visibility _BorderVisibility = Visibility.Collapsed;
            public Visibility BorderVisibility { get { return _BorderVisibility; } set { _BorderVisibility = value; OnPropertyChanged(); } }
    
            public event PropertyChangedEventHandler PropertyChanged = delegate { };
            public void OnPropertyChanged([CallerMemberName] string propertyName = null)
            {
                // Raise the PropertyChanged event, passing the name of the property whose value has changed.
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    
        public sealed partial class CustomButton : UserControl
        {
            public CustomButton()
            {
                this.InitializeComponent();
    
                ViewModel = new ObservableCollection<MyListViewModel>() {
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.AliceBlue)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.AntiqueWhite)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.Aqua)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.Aquamarine)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.Azure)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.Beige)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.Bisque)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.Black)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.BlanchedAlmond)},
                    new MyListViewModel(){Color = new SolidColorBrush(Colors.Blue)},
                };
            }
    
            public ObservableCollection<MyListViewModel> ViewModel { get; set; }
    
            private void GridView_ItemClick(object sender, ItemClickEventArgs e)
            {
                var item = e.ClickedItem as MyListViewModel;
                if (item.BorderVisibility == Visibility.Collapsed)
                {
                    item.BorderVisibility = Visibility.Visible;
                }
                else
                {
                    item.BorderVisibility = Visibility.Collapsed;
                }
            }
        }
    }


     


    Gruß Thomas

    Sage nie, ich kann es nicht - sage nur, ich kann es noch nicht!

    Icon für UWP

    Cross Platform Canvas for UWP, Android, iOS

    UWP Community Toolkit Sample App

    Alle Größenangaben in UWP müssen durch 4 teilbar sein


    Mittwoch, 11. Oktober 2017 13:42
  • Hi, 

    danke für eure Antworten. 

    hab erst Mühsam ein eigenen CheckBox Style erstellt, vom visuellen her passte es, Checked/Unchecked/PointerOver usw ... Dann aber hab ich Probleme gehabt beim binden, und habe es nicht hinbekommen dass immer nur eine CheckBox angekreuzt ist. 

    Mit dem GridView und Click bin ich auch nicht so recht warm geworden

    Habe nun ein RadioButton neu gestylt. 

     <Style x:Key="ColoredRadioButtonChkBox" TargetType="RadioButton">
            <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="{x:Null}"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="MinWidth" Value="48"/>
            <Setter Property="MaxWidth" Value="48"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="FocusVisualMargin" Value="0,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid Height="48" Padding="0,0,0,0" x:Name="RootGrid" BorderBrush="{TemplateBinding Foreground}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="48"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="PointerOver"/>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundDisabled}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="CheckGlyph">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonOuterEllipseFill}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalRectangle"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OuterRectangle"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalRectangle"/>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="OuterRectangle"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Height="48" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left">
                                <Rectangle x:Name="OuterRectangle" Fill="Transparent"  Width="48" Height="48" UseLayoutRounding="False" Stroke="{TemplateBinding Foreground}" StrokeThickness="2"/>
                                <Rectangle x:Name="NormalRectangle" Fill="{TemplateBinding Foreground}" Height="20"  UseLayoutRounding="False" Width="20" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                                <FontIcon x:Name="CheckGlyph" Foreground="{ThemeResource SystemControlForegroundAltHighBrush}" FontSize="20" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE001;" Opacity="0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
                            </Grid>
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


    Allerdings scheint es für den Radio Button kein "Mouse oder Pointer Leave" State zu geben, ich würde gerne beim MouseOver den Rahmen einblenden, beim Verlassen, geht es aber in den Normal State, Also Normal State = Kein Rahmen, PointerOver =Rahmen, ändert sich der Status von Checked auf Unchecked, bleibt der Rahmen bestehen. Kann man sicherlich auch irgendwie lösen, aber das war genug "Styling" erstmal ;) 

            <DataTemplate
                x:Key="MyColorRadiBtnTemplate"
                >
                <StackPanel>
                    <RadioButton GroupName="Colors" Content="" 
                                 ToolTipService.ToolTip="{Binding ColorName}" 
                                 Command="{Binding SelectColorCommand, ElementName=MyColorPickerRoot}"  
                                 CommandParameter="{Binding}" Style="{StaticResource ColoredRadioButtonChkBox}" 
                                 Background="{Binding ColorBrush}"
                                 IsChecked="{Binding HexaCode, Converter={StaticResource RadioBtnCHeckConverter}, Mode=TwoWay}"
                                 >
                    </RadioButton>
                </StackPanel>
            </DataTemplate>


    <GridView ="lstColors" SelectionMode="Single" ItemsSource="{Binding MyColors}" ItemTemplate="{StaticResource MyColorRadiBtnTemplate}"/>

    Freitag, 13. Oktober 2017 10:43