Windows Phone micro UI hacks – simple drop shadows

Well, I was pretty upset when they took off effects support from silverlight, I really was. It was something I really loved thus I could’ve added a little bit of depth in design. I get the idea that it might help improving performance of UI rendering in a device.

So, I was trying out some little hacks, or you might say some faulty impersonations of making a drop shadow, so far I’m not close to that “quality” but I did try.

Let’s assume you want to put a rectangle with a drop shadow. Effectively if you break down a drop shadow you will find a black to grey gradient alpha mask of your rectangle, in easy words, nothing but a blurry grey scale representation of your rectangle lying back. Now, that’s what I tried out here. I took a rectangle, copied it behind it and kept it with a black and grey shades. I could’ve used just one gradient gray shaded rectangle but it doesn’t look that good.

Now, let’s see how that looks.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Rectangle x:Name="tb1" Fill="Black" Opacity="0.2" Margin="1,3,0,0"  Height="{Binding Height, ElementName=tb5}" Width="{Binding Width, ElementName=tb5}"/>
            <Rectangle x:Name="tb2" Fill="Black" Opacity="0.2" Margin="-1,3,0,0"  Height="{Binding Height, ElementName=tb5}" Width="{Binding Width, ElementName=tb5}"/>
            <Rectangle x:Name="tb3" Fill="Black" Opacity="0.4" Margin="0,2,0,0"  Height="{Binding Height, ElementName=tb5}" Width="{Binding Width, ElementName=tb5}"/>
            <Rectangle  x:Name="tb4" Fill="Black" Opacity="0.2" Margin="0,3,0,0" Height="{Binding Height, ElementName=tb5}" Width="{Binding Width, ElementName=tb5}"  />
            <Rectangle Width="250" Height="100" x:Name="tb5" Fill="#FFE63939"  />
</Grid>

This is a very basic try of course. I’m going to make a usercontrol out of it somehow. And if I do, you will find it right here on my blog and looks like somehow I have to fake the blur too.

Well, until next time then. And by the way, it looks like below on the screen:
Rectangle Drop Shadow test

Advertisements

উইন্ডোজ ফোন স্টোরে বাংলা অ্যাপ সাবমিশন – কি কি মনে রাখা উচিত

উইন্ডোজ ফোন স্টোরে যারা সাধারনত অ্যাপ পাবলিশ করছেন, অন্তত বাংলাদেশ থেকে, প্রথম প্রথম এই প্রশ্নটা মাথায় না আসাটা স্বাভাবিক কারণ সাধারণত অ্যাপগুলোর প্রধান ভাষা হয় ইংরেজী। কিন্তু উইন্ডোজ ফোন ৮ আসার পর লোকাল অ্যাপ নিয়ে কাজ করার প্রচলন টা লক্ষণীয়। এবং প্রথম যে প্রশ্নের সামনে আমরা পড়ি তা হচ্ছে, আমি কি করে একটি বাংলা অ্যাপ বানাবো এবং সেটা স্টোরে সাবমিট করবো। আমার আজকের উদ্দেশ্য এই প্রশ্নগুলোর উত্তর দেয়া।

বাংলা অ্যাপ বানানো:

বাংলা অ্যাপ বানানোর প্রথম সাবধানতা হচ্ছে যাদ আপনি সমগ্র অ্যাপটি বাংলায় করতে চান তাহলে অবশ্যই কোন নির্দিষ্ট ইউনিকোড ফন্ট (উদাহরণ: সিয়াম রূপালী) ব্যবহার করবেন সমগ্র অ্যাপটিতে । আপনি চাইলে উইন্ডোজ ফোনের ডিফল্ট ফন্ট যেটা আসে বাংলা লিখলে (নির্মলা) ব্যবহার করতে পারেন তবে নির্দিষ্ট কিছু যুক্তাক্ষরে সমস্যা হয় সুতরাং খেয়াল রাখবেন। অন্যক্ষেত্রে এটি দেখতেও বেশ সুন্দর, ব্যবহারেও বেশ ভালো।

অ্যাপ এর নাম অনায়াসে বাংলা দিতে পারেন। কোন সমস্যা নেই। তবে উইন্ডোজ ফোন ৭.৮ সহ টার্গেট করলে না দেয়া সমীচিন। তাতে উইন্ডোজ ফোন ৭.৮ এ আপনার অ্যাপ এর নাম দেখতে সমস্যা হবে।

খেয়াল রাখ‍বেন সার্চ কিওয়ার্ড এ আপনার অ্যাপ এর নাম এর সম্ভাব্য সকল ইংরেজী নাম দিয়ে দিতে। কেননা অাপনার অ্যাপ টি সার্চ করে তো পাওয়া লাগবে।

অ্যাপ এ যদি সার্চ রাখতে চান বাংলা চন্দ্রবিন্দু একমাত্র ভরসা এখন পর্যন্ত। কারো যদি দরকার হয় কাস্টম কন্ট্রোলটি, যোগাযোগ করুন আমার সাথে। 🙂 আমি সাধ্যমতো চেষ্টা করবো।

এইবার আসি লোকালাইজেশন এর কথায়। আপনি চাইলেই অ্যাপটি লোকালাইজড করতে পারেন। এ নিয়ে বিস্তারিত পাবেন এখানে । আপনার যদি একটি ইন্টারন্যাশনাল অ্যাপ থাকে যার কন্টেন্ট দেশ ও স্থান অনুসারে ভাষা বদলায়, তার জন্যে খুব ভালো অ্যাপ্রোচ এটি।

বাংলা অ্যাপ সাবমিশন:

বাংলা অ্যাপ সাবমিশন টা মোটেও কঠিন নয়। অনেকেই ভাবেন আমি লিখলাম সমগ্র অ্যাপ এর কন্টেন্ট বাংলায়। কিন্তু ভাষা দেখাচ্ছে স্টোরে এখনো ইংরেজী। কি করে ঠিক করি। আসুন দেখে নেই।

WMAppManifest

১. প্রথমে চলে যান আপনার সলুশ্যন এক্সপ্লোরার এর প্রোপার্টিজ এর মধ্যে WMAppManifest.xml এ। এর Packaging ট্যাব এ গেলে আপনি দেখতে পাবেন Default Language নামের ড্রপডাউন লিস্টে Bengali, Bengali (Bangladesh) এবং Bengali (India) আছে।

Capture 2

এবং নিচে খেয়াল করে দেখুন Supported Language নামক একটি লিস্ট আছে

Capture3খেয়াল করে দেখুন এখানেও Bengali, Bengali (Bangladesh), Bengali (India) আছে। আপনি Bengali এবং Bengali(Bangladesh) অবশ্যই চেক করে দিন এবং প্রয়োজনে Bengali (India) চেক করে দিন। কারণ আপনার সমর্থিত ভাষার উপর আপনার মার্কেট সিলেকশন নির্ভর করে । আপনি নিশ্চই চান না আপনার অ্যাপ টি কোন মার্কেটের কোন বাংলাভাষী থেকে দূরে থাকুক।

এবার আসুন Default language এর ব্যাপারে। অনেকেই আমাকে প্রশ্ন করেছেন যে যদি Default Language আমি বাংলা দেই তাতে সমস্যা কি? সমস্যা নেই। তবে পরবর্তীতে যখন অ্যাপ সাবমিট করবেন, মার্কেট সিলেকশনে শুধু বাংলা ভাষা সমর্থিত মার্কেট সিলেক্ট করতে হবে। নাহলে certification fail করতে পারেন। আর অনেকেই US market, UK market এ থাকেন দেশ ও দেশের বাইরে। আপনি নিশ্চই চান না আপনার অ্যাপ এর সম্ভাব্য গ্রাহক হারাতে। সুতরাং ডিফল্ট ল্যাংগুয়েজ ইংরেজী রাখুন।

তাহলে? যদি কেউ ভুল করে ডাউনলোড করে এবং না বুঝে বাজে রেটিং দেয়? সেজন্য অ্যাপ ডেসক্রিপশনে লিখে দিন “The official language for this app is bangla”. প্রথম লাইন হলে ভালো হয়। আর অবশ্যই একটি বাংলা বিবরণ রাখবেন। ভুলবেন না যেন। আর সার্টিফিকেশন কিন্তু অটোমেটেড প্রসেস না। সব কিছুই বেশ ভালো মতো পরীক্ষা করা হয়।

আশা করি সবার সব প্রশ্নের সমাধান হয়েছে।  🙂

 

Binding Command to custom Pushpin in Windows Phone 8 Map Control

Well, this one’s kind of out of line. I faced this last night, searched all over I can but I barely found a concise solution on this one.

Before we get into the solution, we need to see the problem we’re talking about. Shouldn’t we?

I was working with the new Windows Phone 8 Map Control provided with the sdk that allows here maps to be used in your app and I needed a bunch of Pushpins to be loaded in the map. So, Windows Phone Toolkit came to the rescue. I hooked up the <MapExtensions.Children> and added by pushpins there binded from my viewmodel.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >

            <maps:Map x:Name="MyMap" ZoomLevelChanged="MyMap_ZoomLevelChanged"  Loaded="MyMap_Loaded"   >

                <MapToolkit:MapExtensions.Children>

                    <MapToolkit:MapItemsControl Name="MapElements">
                        <MapToolkit:MapItemsControl.ItemTemplate>
                            <DataTemplate>
                                <MapToolkit:Pushpin Name="StopPushPin"  Style="{StaticResource MaximizedPushpin}"  Background="#B20000FF" Content="{Binding Name}" GeoCoordinate="{Binding Location}" Tap="Pushpin_Tap"  >
                                </MapToolkit:Pushpin>
                            </DataTemplate>
                        </MapToolkit:MapItemsControl.ItemTemplate>
                    </MapToolkit:MapItemsControl>
                    <MapToolkit:Pushpin Name="MyPushpin"  Content="I'm Here!" Background="#FF3CD303"  GeoCoordinate="{Binding MyLocation}" />
                </MapToolkit:MapExtensions.Children>

            </maps:Map>
        </Grid>

One could easily see here that I used a PushPin object as DataTemplate with a custom style attached. Lets check the style

<Style TargetType="MapToolkit:Pushpin" x:Key="MaximizedPushpin">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="MapToolkit:Pushpin">
                    <Grid x:Name="ContentGrid" FlowDirection="LeftToRight">

                        <toolkit:WrapPanel Orientation="Vertical">

                            <Grid x:Name="grid" Background="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" HorizontalAlignment="Left"
                                   RenderTransformOrigin="0.5,0.5" Height="148" Width="225">

                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.4*"></RowDefinition>
                                    <RowDefinition Height="0.015*"></RowDefinition>
                                    <RowDefinition Height="0.25*"></RowDefinition>
                                    <RowDefinition Height="0.015*"></RowDefinition>
                                </Grid.RowDefinitions>

                                <TextBlock Margin="8,4,4,4"
                                           FlowDirection="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FlowDirection}"
                                           Grid.Row="0" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"
                                           TextWrapping="Wrap" FontSize="30">

                                </TextBlock>

                                <Border Grid.Row="1" Background="#CC474444" Margin="0,0,-6,0" />
                                <Grid Grid.Row="2"   MinHeight="31" Background="#EEF9F9F9" Margin="0,0,-8,0"  >
                                    <codefun:RoundButton Orientation="Horizontal" Foreground="Black" Background="Transparent"
                                                         BorderBrush="Black" ImageSource="/Assets/pushpin.get.direction.png"
                                                         HorizontalAlignment="Left" VerticalAlignment="Center"
                                                         Margin="0,2,0,0"
                                                         >
                                    </codefun:RoundButton>
                                </Grid>
                                <Grid Grid.Row="3"   Background="#99474444" Margin="0,0,-6,0"/>
                            </Grid>

                            <Polygon Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"
                                     Points="0,0 29,0 0,29"
                                     Width="29"
                                     Height="29"
                                     HorizontalAlignment="Left"/>
                        </toolkit:WrapPanel>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="PositionOrigin" Value="0,1" />
        <Setter Property="Background" Value="Black" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="30" />
    </Style>

All I wanted to do is to bind Command Parameter of RoundButton and hook a RelayCommand in my viewmodel. As is an attached property in the Map control I had to use FindAncestor mode when I tried to bind Command parameter in RoundButton. But bad news is it’s not supported in Windows Phone. The only relative binding mode I have here is templatedparent and self.

And I started looking for a solution. Then this came to my eyes and I was really happy. So, I followed as per what was written in there and voila!

I binded the Command with CommandParameters the following way.

<codefun:RoundButton Orientation="Horizontal" Foreground="Black" Background="Transparent"
                                                         BorderBrush="Black" ImageSource="/Assets/pushpin.get.direction.png"
                                                         HorizontalAlignment="Left" VerticalAlignment="Center"
                                                         Margin="0,2,0,0"
                                                         CommandParameter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DataContext}"
                                                         >

                                        <BindHelper:BindingHelper.Binding>
                                            <BindHelper:RelativeSourceBinding
                                                Path="GetDirectionToPushPinCommand"
                                                TargetProperty="Command"
                                                RelativeMode="ParentDataContext"
                                                />

                                        </BindHelper:BindingHelper.Binding>
                                    </codefun:RoundButton>

A handy tool indeed!