Issue about to start developing an application in windows phone 7 - silverlight

I am about to start developing an application in windows phone 7. But I have a doubt in some points.
This is the GUI format of the application. The application have many pages.
In first section there are 3 buttons and no change for their design in entire application. In iPhone I used the UINavigationBar control. But is there any control in windows phone like UINavigationBar in iPhone ?
In second section the content is always changing.
In third section there are some buttons. But the buttons functionality is different in different pages. And also need to remove or add extra buttons in some pages. In iPhone I used UITabBar control.
Which way I can start the app development efficiently ?. Can anyone please suggest controls or idea I can use here in windows phone for this purpose ?
Thanks.

It seems you're trying to build a Windows PHone app the way you would an iPhone app. This typically leads to a very poor experience on Windows Phone and leads to users becoing frustrated as the app doesn't behave in the same way as other apps on the platform (and therefore the way they expect your app to behave).
I'd recommend starting by looking at some Design Resources for Windows Phone before designing your app so you can build something appropriate to the platform.
A couple of pointers:
- In general, floating buttons on [the top of] a page look bad. This is not the way apps on the platform perform navigation (unlike iOS). Windows Phone apps should use a "hub and spoke" model for page navigation.
- Having contents cahnge within a page is likely to lead to some confusion about the expected behaviour of the back button. Be very careful about this as inconsistent, unpredictable or non-standard back button behaviour can cause an application to fail certification.

If you don't want to create an application where the user can navigate from page to page (and use the back button to go back) you can create an application based on a single page. Here is a somewhat modified version of what Visual Studio creates for you if you create a Windows Phone Application project.
<phone:PhoneApplicationPage
x:Class="PhoneApp1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="728"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Margin="12,17,0,28">
<TextBlock
Text="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock
Text="page name"
Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid Grid.Row="1" Margin="12,0,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- The three buttons -->
<StackPanel Orientation="Horizontal">
<Button Content="Button 1"/>
<Button Content="Button 2"/>
<Button Content="Button 3"/>
</StackPanel>
<!-- The main content -->
<TextBlock Grid.Row="1"
Text="Content always changing"
Style="{StaticResource PhoneTextTitle1Style}"
TextWrapping="Wrap"
TextAlignment="Center"/>
</Grid>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton
IconUri="/Images/appbar_button1.png"
Text="Button 1"/>
<shell:ApplicationBarIconButton
IconUri="/Images/appbar_button2.png"
Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>
And here is how it looks in the designer:
In this case the main content (that is always changing) is a <TextBlock> but you can use a panel composed of other controls or a UserControl. If you put multiple panels/controls in the same grid cell you can completely change the layout by hiding all but one panel/control.
For the top row of buttons I have used a horizontal <StackPanel> but you may want to use something else for better control of the layout and alignment.
For the bottom row of buttons you should use the appbar which is part of the standard Windows Phone 7 user experience.

How abt a Pivot? It might suit your needs. Techinically pivot is used to show the same data in different ways.
MSDN

Related

Place control on top of Microsoft.Toolkit.Wpf.UI.Controls.WebView

<Grid>
<!-- xmlns:webview="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView" -->
<webview:WebView ... />
<Grid x:Name="Overlay"
Panel.ZIndex="1000"
Background="Red"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
I am trying to overlay a WebView with another control (Overlay). But it seems that the WebView is always on top of other controls.
Is there a way to place controls on top of a Microsoft.Toolkit.Wpf.UI.Controls.WebView?
The Webview control is a wrapped UWP control which in turn wraps a win32 component I believe.
Due to airspace problems this control will not support transparency and will always be rendered on top. See here for a better description:
https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/technology-regions-overview
Although it is possible to run it in a popup as a workaround, it might not be very futureproof:
"WebView controls can be hosted in a popup window. We recommend that you do not do this because support for that scenario will soon be disabled for security reasons."
See here for more
CefSharp might be a better solution. It it based on Chromium and there is a Nuget package available. In the example below a red grid is rendered over the browser:
<Grid>
<cefSharp:ChromiumWebBrowser Address="https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions" />
<Grid x:Name="Overlay"
Height="100"
Background="Red"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
Output:

WPF tab control with grid and shared content

I have a wpf tab control in which I would like to have two columns. One column would always show a graph control that will be used to display data depending on the tab selected - but it will always be the same graph control.
Unfortunately, due to the design of the graph control, it is not possible to have more than one graph control mainly because the performance is dismal. I have tried that and it does not work properly.
The other column would show items like combo boxes, radio buttons, etc., that are specific to the selected tab - an example is below
I have also had the tab control in the right-hand column, but the layout of the individual tabs is congested in the right-hand column making for a less than ideal user experience.
Right now, I have the tab control hosted in a grid that has two columns with the column span set to two. For the right-hand pane, I have various group boxes and I control the visibility of those group boxes with triggers using the IsSelected property of the corresponding tab item. This, however, is causing other problems that I have traced to the visibility of the problematic controls.
What I would like to do is modify the template of the control so that I can host all the present controls within the tab control so that the graph control always displays on the left, and that the content of the right-hand tab is controlled by the selected tab.
I figure that doing this will involve either the control template or another template for the tab control, however, I have been unable to find anything like this so far. Is there a way to do something like this and if so, is there a guide to doing so or some hints as to how I might accomplish this?
Thanks.
The way I would approach this requirement would be something like below. And I would apply a template/style to buttons so that they have a look of a TabHeader.
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonTemplate">
<!--Template style-->
</ControlTemplate>
</StackPanel.Resources>
<Button>Root bending</Button>
<Button>S-N curve bending</Button>
<Button>S-N curve contact</Button>
</StackPanel>
<Grid Grid.Row="1" Grid.Column="0">
<!--Your graph control goes here-->
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<!--Show/hide these based on buttons-->
<!--Control 1 with combo boxes, radio buttons, etc.-->
<!--Control 2 with combo boxes, radio buttons, etc.-->
<!--Control 3 with combo boxes, radio buttons, etc.-->
</Grid>
</Grid>
you can declare ChartControl as a Resource and use it in every Tab.
To confirm that ChartControl is the same, type something in TextBox and then select another Tab. Text stays the same. Initialization time shown in TextBlock stays the same.
<Window x:Class="XamlApp.Window6"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib"
Title="TabsWindow"
Height="480" Width="640">
<Window.Resources>
<Grid x:Key="IamChartControl" Background="Khaki">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Source={x:Static system:DateTime.Now}}" Margin="5"/>
<TextBox Text="hello" Grid.Row="1" Margin="5"/>
</Grid>
</Window.Resources>
<Grid>
<TabControl ItemsSource="{Binding Source='12345'}">
<TabControl.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ContentControl Content="{StaticResource IamChartControl}"/>
<TextBlock Grid.Column="1" Text="{Binding}"/>
</Grid>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>
Thanks for the suggestions. Given there is a large amount of existing code and since the graph control is not entirely WPF MVVM compliant, the better answer in this case would be the answer posted by Ritesh. Putting the chart in a resource would have required more of a rewrite of the code than I presently have time to do.
However, I figured out the problem that I was seeing - which was some controls were not showing bold text when I thought that they should be. This was entirely my fault.
On each tab for each field, I had multiple different labels that were made visible depending on the result set that the user chooses. It has been a long time since I visited this code, and what I was doing was adding the bold fontweight because it makes the values stand out better.
Embarrassingly, I forgot that I had implemented it this way.
Instead of the multiple different labels approach, I am going use a single label for each field and set the appropriate content binding in a multidata trigger as that will make the somewhat cleaner. Its a pretty complicated app.
I was going to delete this, but others have asked a similar question, however, I think Ritesh's answer is different than the other cases.

WPF Control, UserControl, Template confusion

Disclosure:
I am new to WPF, about a week into it.
Problem:
I am trying to modify the behavior of a GridSplitter, to make it snap to interesting positions, to show a label (that follows the splitter) with current position, to have a context menu driven from said label, etc. I have prototyped all of this successfully on one gridsplitter in one simple test application, with a combination of XAML and some code behind.
Of note is that because the GridSplitter can't host content, I placed the label in the same grid cell as the splitter so that they move together.
So far so good....
Now I wish to replicate my work so that I can use my new GridSplitter functionality in place of the native control in many locations, and furthermore, I wish to have two variants, a horizontal and a vertical. Sounds like inheritance...create a subclass derived from GridSplitter and add in the additional functionality. But all of the reading I have done leaves me wondering how to go about this, and if this is even possible without starting over again and building my own GridSplitter from scratch?
Ideas welcome. Until then I will resume the fetal position.
Thanks
This answer might help you resolve your issue: How to make GridSplitter to "snap" into another element?
By subscribing to the GridSplitterDragCompleted event, you can insert your logic to snap to "interesting" positions.
You should
create a new control derived from GridSplitter.
subscribe to DragCompleted event to implement snapping functionality like DLeh mentioned.
add a few new properties for Label , ContextMenu etc.
supply a style for your new control.
This answers how to place content in the splitter
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Row 0" Background="Orange"/>
<!--<GridSplitter Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch" Height="20" Background="Purple"/>-->
<GridSplitter Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<GridSplitter.Template>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<TextBlock Text="TextBlock splitter" Background="Yellow" FontWeight="Bold"/>
</ControlTemplate>
</GridSplitter.Template>
</GridSplitter>
<Button Grid.Row="2" Content="Row 0" Background="Salmon"/>
</Grid>

VS2010 WPF - Can I create a menu with menu items just via the UI (not editing XAML?)

Just trying to drag my first Menu control onto a WPF application in VS2010.
Is there a way to (via the VS2010 UI) setup the menu items etc? Or does one have to jump into the XAML to do this?
Also it seems like the Menu control, after I drag it onto the window, exists at the top of the Window. However I was expecting it to be rendered as a typical Windows menu where it's right at the top associated with the window itself (not the window contents), if that makes sense. Does the VS2010 "menu" item from the toolbox give you the "traditional" windows application menu?
I would really encourage you to read up on Panels (and Attached Properties) before you start playing with the controls to understand how they are laid out (Especially the difference between Panels and ContentControls is key). In WPF panels decide how the controls are laid out (at least the basics within which controls get a wee say). It sounds much like you are trying to do WPF the WinForms way - and you will end up really frustrated and needing lots of tranquillizers before the hour turns nigh... :)
In the VS Studio the template uses a Grid as the basis for layouting - which by default centers and stretches content (as well as overlaying controls), so just dragging a menu in there will provide insensible designs.
As for jumping into XAML - I never use the ToolBox and the Visual Designer. It's a matter of taste of course, but if you're used to using VS (in contrast to Blend), I find it easier to understand what is happening when I edit the raw XAML.
A few starter resources: link and link. And for a simpler learning environment for getting started - I enjoyed Kaxaml a lot (which is an editor build in XAML/WPF albeit in .Net 3.5 sp1).
EDIT: A small sample - just copy everything between the Window-tags and paste it between the ones in your template that Visual Studio gives you:
<Window ....>
<DockPanel>
<Menu DockPanel.Dock="Top">
<MenuItem Header="_File">
<MenuItem Header="_Open"/>
<MenuItem Header="_Save"/>
<MenuItem Header="_Exit"/>
</MenuItem>
<MenuItem Header="_Edit">
<MenuItem Header="C_ut"/>
<MenuItem Header="_Copy"/>
<MenuItem Header="Paste"/>
</MenuItem>
<MenuItem Header="Help">
<MenuItem Header="About"/>
</MenuItem>
</Menu>
<GroupBox Header="Some interesting controls go here">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Content="_First property"/>
<TextBox Grid.Column="1"/>
<Label Grid.Row="1" Content="_Second property"/>
<TextBox Grid.Column="1" Grid.Row="1"/>
</Grid>
</GroupBox>
</DockPanel>
</Window>

Is there a way to touch-enable scrolling in a WPF ScrollViewer?

I'm trying to create a form in a WPF application that will allow the user to use iPhone-like gestures to scroll through the available fields. So, I've put all my form controls inside a StackPanel inside a ScrollViewer, and the scrollbar shows up as expected when there are too many elements to be shown on the screen.
However, when I try to test this on my touch-enabled device, a panning gesture (placing a finger down on the surface and dragging it upward) does not move the viewable area down as I would expect.
When I simply put a number of elements inside a ListView, the touch gestures work just fine. Is there any way to enable the same kind of behavior in a ScrollViewer?
My window is structured like this:
<Window x:Class="TestTouchScrolling.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">
<Grid>
<ScrollViewer Name="viewer" VerticalScrollBarVisibility="Auto">
<StackPanel Name="panel">
<StackPanel Orientation="Horizontal">
<Label>Label 1:</Label>
<TextBox Name="TextBox1"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label>Label 2:</Label>
<TextBox Name="TextBox2"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label>Label 3:</Label>
<TextBox Name="TextBox3"></TextBox>
</StackPanel>
<!-- Lots more like these -->
</StackPanel>
</ScrollViewer>
</Grid>
You should use the attached properties:
ScrollViewer.PanningMode
ScrollViewer.PanningDeceleration
ScrollViewer.PanningRatio
The PanningMode defaults to None in the ScrollViewer default style, but setting it to another value will enable touch scrolling. I'm currently investigating using this feature in my app and am looking for a good deceleration and ratio value... I'll probably just have to test them out to find something that works well.
If you are using .NET 4.0, there is a cool thing recently released by Microsoft team!! They ported all those nice Surface controls to Win7. SurfaceScrollViewer is really cool like iphone one. Install this toolkit and start a SurfaceWin7Touch project from VS2010 project template
http://www.microsoft.com/en-us/download/details.aspx?id=26716

Resources