My question seems to be a bit strange. I have a long list selector and I want to add a control like application bar in it so it can be repeated many times the same with the controls in the item template. I thought about a grid with the contents I want, but how can I make this Grid slides up and down ?
Yeah, it is strange but you can certainly try it. There is no definite way to do this but you can create a user control that would be the application bar like element you want and add it to the list selector. But the biggest problem is make it slide up and down. In the user control you can do this easily but there are many ways you can do this. You have to try it out and see. Use animations and story boards to animate the sliding effect. This can be done using Blend for Visual Studio. But you might run in to a problem where even though you did the animation of your application bar sliding in your Application bar like user control, it might not work in the list selector because the layout and the size of a single list item needs to change as the user expands the user control to have the sliding effect. As i said, there are many ways one can do this. You have to try it out and build it.
List item
In App.xaml type in this code
<Application.Resources>
<shell:ApplicationBar x:Key="UserControlAppBar" ForegroundColor="White" BackgroundColor="Black" IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="button1" IconUri="/Assets/Images/appbar/img1.png" Text="News" Click="button1_Click"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="MenuItem" Text="Menu1" Click="Menu1_Click"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</Application.Resources>
Related
Whenever i added the menu items in app bar, an extra line or space is coming under the menu items. I don't know how to remove it. It really disturbs look a lot. herewith i have added that menu by image. Kindly, help me to get rid of that extra space.
My XAML CODE:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
<shell:ApplicationBarIconButton IconUri="/Assets/folder.png" Text="about" Click="more1"/>
<shell:ApplicationBarIconButton IconUri="/Assets/next.png" Text="goto" Click="gotopage"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="rate this app" Click="rateapp"/>
<shell:ApplicationBarMenuItem Text="like us" Click="like"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
OUTPUT APP BAR BY ABOVE CODE:
To my knowledge, it's the default behavior of the application bar to have this space when there are 2 or less menu items. You can get rid of the space by adding another menu item (throw in a help or about us or something) so that you have 3 menu items, or by creating your own application bar. The second route seems really overkill for such a small issue though.
http://social.msdn.microsoft.com/Forums/wpapps/en-US/6920301e-50a4-40fc-930b-28ae12a81cc6/extra-space-in-applicationbar-with-4-menu-items this link is helpful. The number of items should be odd. Otherwise we cannot avoid empty space.
At the moment the App Bar only has a few sizes that it will display. one item, three items, and five items. Thus why you get an extra space if you have 4 items or 2 items.
Whenever i added the menu items in app bar, an extra line or space is coming under the menu items. I don't know how to remove it. It really disturbs look a lot. herewith i have added that menu by image. Kindly, help me to get rid of that extra space.
My XAML CODE:
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
<shell:ApplicationBarIconButton IconUri="/Assets/folder.png" Text="about" Click="more1"/>
<shell:ApplicationBarIconButton IconUri="/Assets/next.png" Text="goto" Click="gotopage"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="rate this app" Click="rateapp"/>
<shell:ApplicationBarMenuItem Text="like us" Click="like"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
OUTPUT APP BAR BY ABOVE CODE:
To my knowledge, it's the default behavior of the application bar to have this space when there are 2 or less menu items. You can get rid of the space by adding another menu item (throw in a help or about us or something) so that you have 3 menu items, or by creating your own application bar. The second route seems really overkill for such a small issue though.
http://social.msdn.microsoft.com/Forums/wpapps/en-US/6920301e-50a4-40fc-930b-28ae12a81cc6/extra-space-in-applicationbar-with-4-menu-items this link is helpful. The number of items should be odd. Otherwise we cannot avoid empty space.
At the moment the App Bar only has a few sizes that it will display. one item, three items, and five items. Thus why you get an extra space if you have 4 items or 2 items.
What i am basically looking out for is a combination of controls that work as 1 whole. I have no idea what the best way would be to start solving this problem in WPF, either a custom control, existing control, slider...?
Only thing i do not want are 3th party controls and the such.
When a certain condition is met a button with text will be placed inside the slider. Every time when certain conditions are met this situation will keep on happening and buttons will be placed inside the border field.
So it could be possible i have like 10 buttons after each other inside the border. The 2 navigation buttons to the left and right serve as navigation between all those buttons so all can actually get view and pressed when needed for further actions.
Picture that illustrates what i wish to achieve:
You can start with something simple as a StackPanel (you dont need to put it in a page but i wanted to make it copy paste friendly):
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Content="Left"/>
<ListBox>
<ListBoxItem>btnTest 10:00h</ListBoxItem>
<ListBoxItem>btnTest 11:00h</ListBoxItem>
</ListBox>
<Button Content="Right"/>
</StackPanel>
</Page>
Then focus on the appearance and behavior separately.
You need to learn WPF styles, so you can get the colors and layout as in your sample picture. This will also let you make the ListBox horizontal.
Look into the concept of a ViewModel to learn how to populate the ListBox with items. And event handlers for the buttons.
Its a very broad question but I hope this gives you a start.
So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?
It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.
You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7
I am working on a windows phone 7 application that uses the FluidMoveBehavior in some of my ListBoxes. For some reason, the FluidMoveBehavior animation seems to want to activate at inappropriate times. I currently have a ListBox on my main page, and I use the following ItemsPanelTemplate which is just a basic StackPanel with a FluidMoveBehavior attached to it:
<ItemsPanelTemplate x:Key="fancyListBoxItemsPanelTemplate">
<StackPanel>
<Custom:Interaction.Behaviors>
<il:FluidMoveBehavior AppliesTo="Children">
<il:FluidMoveBehavior.EaseX>
<ExponentialEase EasingMode="EaseInOut"/>
</il:FluidMoveBehavior.EaseX>
<il:FluidMoveBehavior.EaseY>
<ExponentialEase EasingMode="EaseInOut"/>
</il:FluidMoveBehavior.EaseY>
</il:FluidMoveBehavior>
</Custom:Interaction.Behaviors>
</StackPanel>
</ItemsPanelTemplate>
This works fine when I add/remove items while on the same screen. The animation plays perfectly. However, when I navigate to a new page from my main page, then navigate back, the fluid move animation is triggered as if all of the items were added at once. Is there any way to disable this behavior so it only triggers the animation when the list actually changes?
this is happening because as you navigate to the page with the list box, the list box is created again, which is similar to adding all the items at once which in tuns fires the fluid move trigger. One possible (may not be the legitimate) solution is to have two identical ItemPanel template, one with the behavior and the other without it. When you first navigate to the page apply the template w/o the behavior. Later replace it with the one with the behavior.
Hope that helps.