none
Metro style in WPF? RRS feed

  • Question

  • hi, how to change my wpf theme to windows 8 metro style app? i change button style:

    <SolidColorBrush x:Key="backGround" Color="#0e6d38"/>
                <SolidColorBrush x:Key="WhiteColor" Color="White"/>
                <SolidColorBrush x:Key="WhiteNormalColor" Color="#FF94B4BD"/>
                
                <Style TargetType="{x:Type Button}" x:Key="ButtonTextStyle">
                    <Setter Property="Background" Value="{StaticResource backGround}"/>
                    <Setter Property="Foreground" Value="{StaticResource WhiteColor}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Border Background="{TemplateBinding Background}" BorderThickness="2" BorderBrush="#FFFFFF">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal"/>
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
                                                        <DiscreteColorKeyFrame  KeyTime="0" Value="Black"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ColorAnimationUsingKeyFrames  Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)">
                                                        <DiscreteColorKeyFrame  KeyTime="0" Value="White"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="contentElement" Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)">
                                                        <DiscreteColorKeyFrame  KeyTime="0" Value="Black"/>
                                                    </ColorAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <!--<VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                                </Storyboard>
                                            </VisualState>-->
                                        </VisualStateGroup>
                                        <!--<VisualStateGroup x:Name="FocusStates">
                                            <VisualState x:Name="Focused">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Unfocused" />
                                        </VisualStateGroup>-->
                                    </VisualStateManager.VisualStateGroups>
                                    <Viewbox Margin="10">
                                        <StackPanel Orientation="Horizontal">
                                            <ContentPresenter VerticalAlignment="Center" Grid.Column="1">
                                               <ContentPresenter.Content>
                                                    <TextBlock Foreground="White" x:Name="contentElement" Text="{TemplateBinding Content}">
    
                                                    </TextBlock>
                                                </ContentPresenter.Content>
                                            </ContentPresenter>
                                        </StackPanel>
                                    </Viewbox>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <!--<Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="Black"/>
                        </Trigger>
                        <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
                                        <DiscreteColorKeyFrame KeyTime="0" Value="White"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)">
                                        <DiscreteColorKeyFrame KeyTime="0" Value="Black"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)">
                                        <DiscreteColorKeyFrame KeyTime="0" Value="Black"/>
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Foreground).(SolidColorBrush.Color)">
                                        <DiscreteColorKeyFrame KeyTime="0" Value="White"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>-->
                    </Style.Triggers>
                </Style>
    Wednesday, December 7, 2011 11:10 AM

Answers

All replies

  • Hi there,

    Don't really know what your question is but here is a metro button style that I am using. I require it for a touch application so didn't worry about mouse over states etc.

    (Can't open code formatter now, will format later on)

    <UserControl.Resources>
    <Thickness x:Key="MetroBorderThickness">3</Thickness>
    <Color x:Key="OrangeAccentColor">#FFF09609</Color>
    <Color x:Key="MetroForegroundColor">#FFFFFFFF</Color>
    <Color x:Key="MetroDisabledColor">#FFBABABA</Color>
    <SolidColorBrush x:Key="MetroAccentBrush" Color="{StaticResource OrangeAccentColor}"/>
    <SolidColorBrush x:Key="PhoneForegroundBrush" Color="{StaticResource MetroForegroundColor}"/>
    <!-- Generic Metro Button Style -->

        <Style TargetType="Button">         <Setter Property="Background" Value="{StaticResource MetroAccentBrush}"/>         <Setter Property="BorderBrush" Value="{StaticResource MetroForegroundBrush}"/>         <Setter Property="Foreground" Value="{StaticResource MetroForegroundBrush}"/>         <Setter Property="BorderThickness" Value="{StaticResource MetroBorderThickness}"/>         <Setter Property="Padding" Value="10,3,10,5"/>         <Setter Property="Width" Value="100" />         <Setter Property="Height" Value="36"/>         <Setter Property="MinHeight" Value="36" />         <Setter Property="FontSize" Value="15"/>         <Setter Property="FontFamily" Value="Segoe UI Semibold" />         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="Button">                     <Grid Name="PART_Button" Background="{TemplateBinding Background}">                      <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />                     </Grid> <ControlTemplate.Triggers>                         <Trigger Property="IsEnabled" Value="false">                             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>                             <Setter Property="Background" Value="{StaticResource MetroDisabledBrush}"/>                         </Trigger>                     </ControlTemplate.Triggers>                 </ControlTemplate>             </Setter.Value>         </Setter>     </Style>
    </UserControl.Resources>
    Wednesday, December 7, 2011 7:26 PM
  • hi,

    thank you for replay.

    i want to other control style in metro app.


    Iran Islamic Republic Of, I believe in Allah of the Quran
    Thursday, December 8, 2011 3:50 AM
  • Hi Ali,

    Thank you for your post.

    According to your description, I understand you want to convert style of button in WPF to metro style code.

    But as far as I know, we can't simply use WPF xaml code in metro style.

    So I think maybe you need some manual modification on your wpf style code. You can modify you code based on below guideline to have a try:

    http://msdn.microsoft.com/en-us/library/windows/apps/br229571(v=VS.85).aspx

    Have a nice day.


    Annabella Luo[MSFT]
    MSDN Community Support | Feedback to us
    Friday, December 9, 2011 3:40 AM
    Moderator
  • hi,

    thank you for replay.

    i want to get windows 8 metro controls style

    i want to set style in my wpf project theme.


    Iran Islamic Republic Of, I believe in Allah of the Quran
    Wednesday, December 14, 2011 9:25 AM
  • Wednesday, December 14, 2011 9:43 AM
    Moderator
  • Hi! You can use Elysium Theme, which licensed under MIT license and included ApplicationBar and ToastNotification classes.
    Wednesday, February 22, 2012 7:13 PM