Archive for June 2014

Windows store app prism startup or first launching page change

In App.xaml.cs file you can see the below method which contains navigation service code that is responsible to set start up page.

If you have MainPage.xaml page in Views folder the below code is used to set as start up page.

protected override Task OnLaunchApplication(LaunchActivatedEventArgs args)
        {
            NavigationService.Navigate("Main", null);
            return Task.FromResult<object>(null);
        }
\
If you have SecondPage.xaml page in Views folder the below code is used to set it as start up page.

protected override Task OnLaunchApplication(LaunchActivatedEventArgs args)
        {
            NavigationService.Navigate("Second", null);
            return Task.FromResult<object>(null);
        }

Saturday, 28 June 2014
Posted by Sudhir Chekuri

Windows Store app prism Navigation from one page or view to other



In prism to navigate from one page to other Navigation Service is used.

Every page you create in prism should be suffixed by Page but it is not considered as page name.

For example: Under view folder create a view - Right click on Views folder - Add New Item - Page View(Prism) - SecondPage

Second is the view name and Page is used as Suffix to recognize it as a view Page.



Posted by Sudhir Chekuri

Windows store app xaml c# Installing prism template and Creating first app

Prism is from Microsoft Patterns and Practises.
It is used to create WPF, Silverlight and windows store apps.
It provides services like loosely coupled MVVM pattern, Navigation and app life cycle management, Flyout services, validations.

Prism for Windows runtime templates for 8/8.1 are now available as a Nuget Package.
Install it to start creating windows store prism app.

Installation steps:

Click on tools from the top menu and then select extensions and updates.
Search for prism windows runtime template from online.
Click on downlad and then install.
Winrt Prism templates are available for 8 and 8.1.
Download and install it to start creating windows runtime prism app using prism template.


Create a new project in your visual studio.
And Use prism App Template to create prism app.

Prism app Solution Explorer



Posted by Sudhir Chekuri

Visual Studio 2012 .NET Unit Testing

In this video tutorial of unit testing of C# method is explained in the most simplest way by testing a method having array as return type.
Unit testing is used to check weather the method is returning the expected output or not.





Wednesday, 25 June 2014
Posted by Sudhir Chekuri
Tag :

windows store app xaml grid with opacity

XAML code of grid with transparent black color as background.

<Grid>
  <Grid.Background >
                <SolidColorBrush Color="#000000" Opacity="0.7"/>
            </Grid.Background>
</Grid>


Posted by Sudhir Chekuri

windows store app prism xaml code for orientation landscape portrait view handling using visual state manager to change properties of controls in runtime

xaml code for handling landscape and orientations of windows store app developed using prism

Note: Write the VisualStateManger Groups xaml code at the starting inside root grid in your page.

Needs no C# code for handling this orientations.
The following xaml code makes change in property values when orientation of the app changed from landscape to portrait view and it will undo the changes when the app comes back to landscape mode.
1. grid view collapse and visible
2. List View font family thickness and vertical alignment
3. Textblock fontsize
4. Grid Row no, Column no, ColumnSpan
5. Button width and height

XAML Code


<Grid>
    <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ApplicationViewStates">
    <VisualState x:Name="DefaultLayout"/>
    <VisualState x:Name="PortraitLayout">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="portraitEventViewModelsGridView">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <Visibility>Visible</Visibility>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="landscapeEventViewModelsGridView">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <Visibility>Collapsed</Visibility>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.FontFamily)" Storyboard.TargetName="ListView1">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <FontFamily>Global User Interface</FontFamily>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.BorderThickness)" Storyboard.TargetName="ListView1">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <Thickness>50,200,50,0</Thickness>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.VerticalAlignment)" Storyboard.TargetName="ListView1">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <VerticalAlignment>Top</VerticalAlignment>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>


 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextBlock1"  Storyboard.TargetProperty="(TextBlock.FontSize)">
                            <DiscreteObjectKeyFrame Value="20" KeyTime="0">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>


<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1"
                             Storyboard.TargetProperty="(Grid.Column)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1"
                                                       Storyboard.TargetProperty="(Grid.Row)">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1"
                                                       Storyboard.TargetProperty="(Grid.ColumnSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                        </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Button1"  Storyboard.TargetProperty="(Button.Width)">
                            <DiscreteObjectKeyFrame Value="225" KeyTime="0">
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Button1"  Storyboard.TargetProperty="(Button.Height)">
                            <DiscreteObjectKeyFrame Value="56" KeyTime="0">
                            </DiscreteObjectKeyFrame>

                        </ObjectAnimationUsingKeyFrames>

    </Storyboard>
    </VisualState>
    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

</Grid>


Tuesday, 24 June 2014
Posted by Sudhir Chekuri

Windows store app list view with item template and grid inside listview with stretched horizontal alignment based on the screen size

Property ItemContainerStyle is used to add a item container style in which horizontal alignment is changed to stretch which makes the grid inside listview item to occupy the entire width of the screen.

XAML code of list view with data template containing grid (width = screen width)
ItemContainerStyle used to style grid present in listview

 <ListView  ItemsSource="{Binding FutureEvents}" ItemTemplate="{StaticResource EventItemTemplate}"
                                          SelectionMode="Single"  IsSwipeEnabled="True" IsItemClickEnabled="False" 
                                        ItemContainerStyle="{StaticResource ListViewItemStyle}" SelectedItem="{Binding SelectedEventForOtherInspection,Mode=TwoWay}" >
                                  
                                </ListView >


 <DataTemplate x:Key="EventItemTemplate">
      
        <Grid HorizontalAlignment="Stretch" >
            <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.5*" />
                <ColumnDefinition Width="0.5*" />
                  
            </Grid.ColumnDefinitions>
        </Grid>
      
    </DataTemplate>

 <Style x:Key="ListViewItemStyle" TargetType="ListViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="Margin" Value="0,0,0,0"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" ContentMargin="4" ContentTransitions="{TemplateBinding ContentTransitions}" CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" PointerOverBackgroundMargin="1" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" SelectionCheckMarkVisualEnabled="True" SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}" SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


Monday, 23 June 2014
Posted by Sudhir Chekuri

windows store app xaml C# code with styles for left colored panel with vertical text and header with left, center and right alignment textblocks

Xaml code for left panel with vertical text, header with multiple textblocks with different alignments 

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="LeftPanelStyle" TargetType="Grid" >
            <Setter Property="Background" Value="Green"/>
        </Style>

        <ImageBrush x:Key="BackgroundBrush" 
                ImageSource="ms-appx:///Assets/bg.png" 
                Stretch="UniformToFill" />
        
        <Style x:Key="LayoutRootStyle" TargetType="Panel">
            <Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
            <Setter Property="ChildrenTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <EntranceThemeTransition/>
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="56"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Style="{StaticResource LeftPanelStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <StackPanel Grid.Row="1" Grid.Column="0" VerticalAlignment="Bottom" Margin="0,0,0,0">
                <StackPanel.RenderTransform>
                    <CompositeTransform Rotation="-90"></CompositeTransform>
                </StackPanel.RenderTransform>
                <TextBlock Text="Side Heading" FontSize="22" Margin="0,15,-226,0"  />
            </StackPanel>
        </Grid>

        <Grid Grid.Column="1" Style="{StaticResource LayoutRootStyle}">
            <Grid.RowDefinitions>
                <RowDefinition Height="120" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <!-- Back button and page title -->
            <Grid Grid.Column="1" VerticalAlignment="Top"  Margin="0,15,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="170"/>
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>

                <Image Grid.Column="1" VerticalAlignment="Bottom" Grid.RowSpan="2" Grid.Row="0" Height="56" Width="114" Source="{Binding SelectedEventLogo}" Stretch="None" HorizontalAlignment="Left">
                </Image>
                <StackPanel Grid.Column="2" Grid.Row="0">

                    <TextBlock Text="Page Header" Style="{StaticResource HeaderTextBlockStyle}"/>
                </StackPanel>
                <StackPanel Grid.Column="3" Grid.Row="0" HorizontalAlignment="Center">
                    <TextBlock Text="2nd" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource HeaderTextBlockStyle}" />
                </StackPanel>
                <StackPanel Grid.Column="5" Grid.Row="0" HorizontalAlignment="Right">
                    <TextBlock   Text="3rd" Grid.Column="1" IsHitTestVisible="false"  Style="{StaticResource HeaderTextBlockStyle}" HorizontalAlignment="Right" />
                </StackPanel>
            </Grid>

          

        </Grid>
    </Grid>

</Page>


Posted by Sudhir Chekuri

how to wrap windows store app xaml button content or text

There is no wrapping property available for button content so if you want to have wrapping content inside button use textblock control inside button control. Then apply wrapping for textblock text as shown in the below xaml code.

XAML Code to wrap content inside a xaml button control used for wpf and windows store apps

 <Button   Height="190" Width="296">
                            <TextBlock TextWrapping="Wrap" TextAlignment="Center">Content to be wrapped inside button goes here</TextBlock>
</Button>


Wednesday, 18 June 2014
Posted by Sudhir Chekuri

Windows store apps XAML C# Using common image as background image in all pages

Code in resource dictionary to mention an image as source to use in all pages as background image

 <!--Background image for all pages-->
    <ImageBrush x:Key="BgImage" ImageSource="Images/InnerBg.png"></ImageBrush>


Code in xaml page to add it as background image

 <Grid x:Name="MainGrid" Background="{StaticResource BgImage}">
</Grid>


Monday, 16 June 2014
Posted by Sudhir Chekuri

windows store apps xaml global app bar button styles in resource dictionary with custom image

This code is used to add an app bar in a xaml page.
That app contains 3 buttons.
Appbar button inside secondary commands tag are known as global commands and are displayed on the right side of the appbar.
For this three buttons styles are written in sepearate resource dictionary file.
label property is used to give the name below the appbar button and icon is used to mention the image icon to be displayed in the appbar button.
3 rd button style contains content template with image source to display custom image in appbar button.

To use global style written in seperate resourcedictionary page in every page of your application you have to include the below xaml tags in app.xaml page.

Code in App.xaml page

<Application
    x:Class="BSNFRailway.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BSNFRailway">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="BSNFResources.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>



XAML Code for app bar in MainPage.xaml

 <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Style="{StaticResource AppBarRefreshButtonStyle}" />

            <CommandBar.SecondaryCommands>
                <AppBarButton Style="{StaticResource AppBarFilterButtonStyle}" />
                <AppBarButton Label="Asset Tree" Style="{StaticResource AppBarAssetTreeButtonStyle}" >
                  
                </AppBarButton>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>

Code in ResourceDictionary.xaml page

<Style x:Key="AppBarFilterButtonStyle" TargetType="AppBarButton" >
        <Setter Property="Label" Value="Filter" ></Setter>
        <Setter Property="Icon" Value="Filter" ></Setter>
    </Style>
    
    <Style x:Key="AppBarRefreshButtonStyle" TargetType="AppBarButton" >
        <Setter Property="Label" Value="Refresh" ></Setter>
        <Setter Property="Icon" Value="Refresh" ></Setter>
    </Style>
  
    <Style x:Key="AppBarAssetTreeButtonStyle" TargetType="AppBarButton">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Image Source="/Images/TreeLogo.png" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Label" Value="Tree" />
    </Style>

Posted by Sudhir Chekuri

Visual Studio TFS ( Team Foundation Server )

In TFS

we can see My Work in which you can find different categories like

In Progress Work

Suspended Work

Available Work Items

Code Reviews

--------

Open Query in Available Work Items is used to view work.

To assign task to team mates 

In Available work items - New - Task - enter details of task and assign task to you - Save it and refresh My Work in TFS to see the newly added task under available work items.


Sunday, 15 June 2014
Posted by Sudhir Chekuri

Followers

Total Pageviews

Powered by Blogger.

- Copyright © 2013 DevStudent - Metrominimalist - Powered by Blogger - Designed by Johanes Djogan -