Skip to main content

Custom button image of AppBar in a Windows 8 Metro application

Intr-o aplicatie Metro pentru Windows 8, in partea de jos avem un app bar in care putem sa punem diferite comenzi. Este extrem de asemanator cu app bar-ul de pe pe Windows Phone 7. By default, framework-ul contine o lista de icoane pe care le putem folosi pentru aceste comenzi.
Pe langa aceste imagini, sunt cazuri cand dorim sa avem iconite custom, pe care noi le-am definit. Aceste imagini trebuie adaugate sub forma unor resurse png. (48px pe 48px). In general avem cel putin doua resurse, una cand butonul este selectat, iar cealalta pentru starea normala.
Urmatorul pas este sa ne definim un stil pentru a avea un efect pe buton cand acesta este apasat. Acesta se poate face ca in felul urmator:
   <Style x:Key="CustomMyCommandAppBarButtonStyle" TargetType="Button" >
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <StackPanel  Height="70" Orientation="Vertical" Margin="{TemplateBinding Margin}">
                            <Image Source="/Assets/normalStateButton.png" x:Name="nonpressedImage"/>
                            <Image Source="/Assets/pressedStateButton.png"
                             Visibility="Collapsed" x:Name="pressedImage"/>
                            <TextBlock Text="{TemplateBinding AutomationProperties.Name}"
                                HorizontalAlignment="Center"
                                Margin="0,0,2,0"
                                FontSize="12"
                                TextAlignment="Center"
                                Width="88"
                                MaxHeight="32"
                                TextTrimming="WordEllipsis"
                                Style="{StaticResource BasicTextStyle}"/>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver" />
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pressedImage" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" >
                                                    <DiscreteObjectKeyFrame.Value>Visible</DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="nonpressedImage" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" >
                                                    <DiscreteObjectKeyFrame.Value>Collapsed</DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
Totul pare destul de simplu, dar va atrag atentia la un lucru, daca nu setati si visual state-ul pentru actiune de mouse over, chiar daca nu definim nici o actiune pentru acesta, dupa ce se apasa butonul, imaginea care o sa ramana afisata o sa fie tot cea care se afiseaza cand butonul este apasat.
<VisualState x:Name="MouseOver" />
Pentru acesta problema este nevoie sa adaugam si visual state-ul pentru mouse over. Lasandul fara nici o actiune custom, o sa fie folosita cea default. Prin acest mod, ii putem spune la buton sa revina la normal dupa ce se face click pe el.
Din cauza ca nu sunt un expert in XAML, mi-a trebuit ceva vreme pana sa imi dau seama care era problema. Sper sa nu patit si voi la fel.
Era sa uit, dupa ce va definiti acest style, tot ce mai este nevoie sa il aplicati stilul pe butonul vostru din AppBar.

Comments

Popular posts from this blog

Windows Docker Containers can make WIN32 API calls, use COM and ASP.NET WebForms

After the last post , I received two interesting questions related to Docker and Windows. People were interested if we do Win32 API calls from a Docker container and if there is support for COM. WIN32 Support To test calls to WIN32 API, let’s try to populate SYSTEM_INFO class. [StructLayout(LayoutKind.Sequential)] public struct SYSTEM_INFO { public uint dwOemId; public uint dwPageSize; public uint lpMinimumApplicationAddress; public uint lpMaximumApplicationAddress; public uint dwActiveProcessorMask; public uint dwNumberOfProcessors; public uint dwProcessorType; public uint dwAllocationGranularity; public uint dwProcessorLevel; public uint dwProcessorRevision; } ... [DllImport("kernel32")] static extern void GetSystemInfo(ref SYSTEM_INFO pSI); ... SYSTEM_INFO pSI = new SYSTEM_INFO(

Azure AD and AWS Cognito side-by-side

In the last few weeks, I was involved in multiple opportunities on Microsoft Azure and Amazon, where we had to analyse AWS Cognito, Azure AD and other solutions that are available on the market. I decided to consolidate in one post all features and differences that I identified for both of them that we should need to take into account. Take into account that Azure AD is an identity and access management services well integrated with Microsoft stack. In comparison, AWS Cognito is just a user sign-up, sign-in and access control and nothing more. The focus is not on the main features, is more on small things that can make a difference when you want to decide where we want to store and manage our users.  This information might be useful in the future when we need to decide where we want to keep and manage our users.  Feature Azure AD (B2C, B2C) AWS Cognito Access token lifetime Default 1h – the value is configurable 1h – cannot be modified

What to do when you hit the throughput limits of Azure Storage (Blobs)

In this post we will talk about how we can detect when we hit a throughput limit of Azure Storage and what we can do in that moment. Context If we take a look on Scalability Targets of Azure Storage ( https://azure.microsoft.com/en-us/documentation/articles/storage-scalability-targets/ ) we will observe that the limits are prety high. But, based on our business logic we can end up at this limits. If you create a system that is hitted by a high number of device, you can hit easily the total number of requests rate that can be done on a Storage Account. This limits on Azure is 20.000 IOPS (entities or messages per second) where (and this is very important) the size of the request is 1KB. Normally, if you make a load tests where 20.000 clients will hit different blobs storages from the same Azure Storage Account, this limits can be reached. How we can detect this problem? From client, we can detect that this limits was reached based on the HTTP error code that is returned by HTTP