I need a "Сarousel like" control in my windows phone 7 APP, there will be list of images and I need to switch them like items in Pivot. What control should I use? Pivot is very similar, but I need footer in my application.
If you(or anyone else stumbeling into this question hunting for fancy UI elements) want it a bit more fancy you could alternatively use the Silverlight Flow Layouts Library which is a very powerfull carousel system with a dedicated WP7 binary. I have not used this on WP7 yet my self, but I have used it with WPF and it both looks good and performs well.
You can use a Pivot control where you hide the headers, I blogged about a simple solution to this problem here:
A Windows Phone 7 Slide View with Page Pips
You can add your fixed footer under the Pivot control as follows:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="#EAE5C7">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<local:PivotLocationView Source="{Binding ElementName=pivot}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Margin="0,0,0,10"/>
<controls:Pivot Margin="0,-30,0,40"
x:Name="pivot">
<controls:PivotItem>
...
</controls:PivotItem>
<controls:PivotItem>
...
</controls:PivotItem>
<controls:PivotItem>
...
</controls:PivotItem>
</controls:Pivot>
<!-- your fixed footer goes here -->
<Grid x:Name="footer" Grid.Row="1">
</Grid>
</Grid>
You can try to use the control from this Codeplex project Silverlight Carousel Control
and hope it does not use any non-WP7 features.
Related
I have an image that I want various parts of to be clickable. I found a comment in the question below mentioning this was possible with Expression Designer. I haven't been able to find a guide on how to do this. I understand that I have to export the image from Designer to Visual Studio. Is there a better way of achieving this or how do I go about creating the xaml for these clickable sections?
best way for clickable image map in wpf
Personally I'd use the second answer to that question i.e. do something like this:
<Canvas>
<Image Source="background.png"/>
<Ellipse Canvas.Left="82" Canvas.Top="88" Width="442" Height="216" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_1"/>
<Ellipse Canvas.Left="305" Canvas.Top="309" Width="100" Height="50" Fill="Transparent" Cursor="Hand" MouseDown="Ellipse_MouseDown_2"/>
</Canvas>
Then you can drag and resize the shapes in DevStudio using it's XAML editor's design mode.
I'd like a tool to visualize the Visual Hierarchy of a XAML file - just an outline of what elements are within what other elements.
I downloaded XAMLPadX 4.0 and opened a GridSplitter example file:
<Window x:Class="GridsplitterSample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridSplitter Sample" Height="400" Width="700">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" Width="4" Background="Yellow"/>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="0 0 4 0" Background="LightGray">Text Block</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" Background="LightGreen">Text Block 2</TextBlock>
</Grid>
</Window>
. . . This example runs and builds fine in Visual Studio 2010 but in XAMLPadX it showed nothing on the main screen and in the Visual Tree window it only expanded as far as the outer Grid element and there was no "+" to expand that any farther to show the inner Grids, TextBlocks or GridSplitter.
XamlPadX came with sample files so I loaded "Red Dragon". It displayed the XAML and a red dragon on the main screen. But now I can't get RID of the red dragon! No matter what else I load that's all I see in the main window and Visual Tree, even though different XAML is loaded in the XAML window. Red Dragon seems to have broken the tool and resrating it seems to make no difference.
So am I doing something wrong or is there a better tool?
Thanks in advance.
If you aren't already familiar than there's no other tool I know of that is nearly as handy as Expression Blend and I know normally it's frowned upon to provide answers that are only a couple sentences. However for working with XAML in WPF/SL Expression Blend is excellent once you get used to it. The Objects / Timeline and visual Properties etc. make dev so much more efficient! If you can't tell, I'm a big fan.
Or if you haven't already done so you can enable the Document Outline window in Visual Studio and it also helps quite a bit with visualizing the structure. Hope this helps.
Could use Snoop. Will attach to any compatible .NET managed app, I think it might even support some Silverlight apps. CTRL+Shift+Mouseover to highlight areas and expose them in the document hierarchy.
When I create a Silverlight project in the Visual Studio, then build it, the VS would popup a page with the silverlight that I just made.But that silverlight object always on the left-up corner, is there any way to make it in the horizontal center of the page?
Best Regards,
Ordinarily the positioning of the plugin content within the rest of the HTML page is a problem for the HTML/CSS to solve not the Silverlight. (If you want that look for CSS solutions that center any HTML element in the Viewport and then apply it to the object tag in the .aspx or .htm hosting your control).
However I'm going to guess you don't have any other content in the page, the page exists only to host the silverlight content. In this case it may be better to let the Silverlight content occupy the entire page. The default .aspx and .htm test pages are designed to allow the plugin to do that, you just need to move the Width and Height properties from the UserControl to the inner "LayoutRoot" element and set the "LayoutRoot" to have "Center" HorizontalAlignment and VerticalAlignment.
In other words from this:-
<UserControl xmlns=".... blah...."
Width="600" Height="400">
<Grid x:Name="LayoutRoot">
<!-- Content here --?
</Grid>
</UserControl>
to this:-
<UserControl xmlns=".... blah....">
<Grid x:Name="LayoutRoot" Width="600" Height="400"
HorizontalAlignment="Center" VerticalAlignment="Center">
<!-- Content here --?
</Grid>
</UserControl>
When going through a tutorial, the 'ribbon.ApplicationhMenu' always comes up on the left hand of the screen, rather than the right, as it does in Office 2007, Paint (on Windows 7), and WordPad (on Windows 7).
Is there some way to change this?
Thank you
(Example of the issue is here http://cid-a45fe702de180b23.skydrive.live.com/self.aspx/Public/RibbonAnnoyance.png (as a new user, I can only post 1 hyperlink))
Thank you for your reply. Yes, I am using the Ribbon / FluentUI from the Office Team
Sorry, I was unable to log-on to the 'M.Ahrens' account that I create about 22 hours ago (it wasn't an OpenID one, and I am unsure how to log on without an OpenID, so I am now made my self an OpenID).
I was unable to post the link to the tutorial previously (as a new user can only post 1 hyperlink), but here it is:
http://www.renevo.com/blogs/dotnet/archive/2009/02/10/your-first-wpf-ribbon-application.aspx
It doesn't just happen in this tutorial, it happens in every other ribbon app that I make (including Microsoft samples). I have tried the flowing:
*HorizontalAlignment="Right"
*HorizontalContentAlignment="Right"
*FlowDirection="RightToLeft" (makes the ApplicationMenu go to the right, but switches the columns around)
*Default
But it doesn't seem to make a different, the ApplicationMenu is still on the 'left' hand side (unless I maximize the window).
M.Ahrens
+++++++++++++++++++++++++
Edit (added a code sample):
<r:RibbonWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Height="400" Width="400">
<DockPanel>
<r:Ribbon DockPanel.Dock="Top">
<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu>
</r:RibbonApplicationMenu>
</r:Ribbon.ApplicationMenu>
</r:Ribbon>
</DockPanel>
</r:RibbonWindow>
Are you using the WPF Ribbon from the OfficeUI team?
We are using that one and don't get anything happening like that. Possibly post some of the XAML you are using to create the App Menu.
EDIT: Having a look at your code, i suspect the DockPanel is being a bit silly.
This is how we structure out layout to add the ribbon
<r:RibbonWindow x:Class="MyAssembly.Main"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
Title="The Title"
Height="450"
Width="600" >
<Grid x:Name="grdMain">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<r:Ribbon Title="The Title" x:Name="ribbonMain" Grid.Row="0">
<!--Quick Access Toolbar-->
<r:Ribbon.QuickAccessToolBar>
<r:RibbonQuickAccessToolBar>
</r:RibbonQuickAccessToolBar>
</r:Ribbon.QuickAccessToolBar>
<!--Application Menu-->
<r:Ribbon.ApplicationMenu>
<r:RibbonApplicationMenu x:Name="mnuApplication">
<!--App Menu Items-->
<r:RibbonApplicationMenu.Items>
</r:RibbonApplicationMenu.Items>
<!--App Menu Recent Item List-->
<r:RibbonApplicationMenu.RecentItemList>
<StackPanel>
<r:RibbonLabel>Recent Items</r:RibbonLabel>
<r:RibbonSeparator/>
<r:RibbonHighlightingList x:Name="lstRecentItems"/>
</StackPanel>
</r:RibbonApplicationMenu.RecentItemList>
<!--App Menu Footer-->
<r:RibbonApplicationMenu.Footer>
</r:RibbonApplicationMenu.Footer>
</r:RibbonApplicationMenu>
</r:Ribbon.ApplicationMenu>
</r:Ribbon>
<Grid Grid.Row="1">
<!--This is the aread under the ribbon. Place layout things inside of this space-->
</Grid>
</Grid> </r:RibbonWindow> <!--This is closing tag is on this line as SO is being silly-->
As I mentioned, I suspect the DockPanel is being just abit silly, tho it's a bit late (12am) for me to test it right now.
Try copying this code into your XAML and see what happens.
To be frank, I don't trust DockPanels a whole lot, Grids work much better for me :D
In Windows Forms the default behaviour of a TabControl is to have the tabs spill out to a scrollable area if they consume too much space (MultiLine = false).
What is the best approach to achieving this behavior in WPF?
UPDATE
I was trying to find a solution using TabControl.ItemsPanel but it seems anything I put in there gets completely ignored, so for this reason I've gone the hard way and started with TabControl.Template which is mind boggling that we have to do it this way if it turns out to be the correct approach.
Extremely far from being complete, my starting solution to the problem is as follows.
<TabControl>
<TabControl.Template>
<ControlTemplate TargetType="{x:Type TabControl}">
<DockPanel>
<ScrollViewer DockPanel.Dock="Top"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Disabled">
<StackPanel Orientation="Horizontal" IsItemsHost="True" />
</ScrollViewer>
<ContentPresenter ContentSource="SelectedContent" />
</DockPanel>
</ControlTemplate>
</TabControl.Template>
<TabItem Header="One">First</TabItem>
<TabItem Header="Two">Second</TabItem>
<TabItem Header="Three">Third</TabItem>
<TabItem Header="Four">Fourth</TabItem>
<TabItem Header="Five">Fifth</TabItem>
</TabControl>
In working to make a TabControl where the tabs are stacked vertically along the left, I found this solution for you:
http://www.blogs.intuidev.com/post/2010/02/10/TabControlStyling_PartThree.aspx
Pretty impressive stuff!
Your solution to replace the template seems to be the best way to do this. The default panel for the TabItems is a TabPanel, and I don't see anything like a "should wrap" property on it.
The documentation contains an example of replacing the TabControl template with a different TabPanel:
http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.tabpanel.aspx
i had the same problem few years ago, my solution was to limit the size of the header, and the panel that contains it, of course you need to make your own template like what you started, and also i need to implement some scrolling support so i put two repeat buttons at the left and right side of the scroll viewer.
my inspiration was a nice project from code project called IE tabs in wpf.
it's old as wpf and works good
I know this is an older post, but I wanted to add another idea should others be searching this on the internet.
If you set the width of the tabpanel to something larger it will be (assuming this is not a tabpanel that allows the user to continue to add other tabs in it). If you have the user adding new tabs to the tab panel, then a scroll bar will need to be added.
the easiest option is to set the ItemsPanelTemplate on the TabControl. I think the default is WrapPanel, hence the Multiline behaviour.
Change it to StackPanel for example and maybe add a ScrollViewer.
Something like this (just coding this without VS)
<TabControl>
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
</TabControl>
hope that helps a bit...