Want a tool to visualize XAML hierarchy, tried XAMLPadX had problems - wpf

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.

Related

Is there any free Visual Studio plug-in/extension or external program to visualize XAML DataTemplate?

Visual Studio (10) gives the expected message "Intentionally Left Blank" in the designer.
I know already that I can do this with Blend, just looking around if there is an alternative solution...
I don’t really mind to graphically edit the template; I want only to see it without having to run the application.
Thanks!
Not exactly what you might want, but you can use XamlPad and just paste the content of your datatemplate into it. As long as you don't have layout related bindings, it should work well. Bindings are just ignored by xamlpad, and you need to add the 2 wpf namespace aliases by hand.
for example:
<TextBlock xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Text="{Binding test}"
Background="Red"
Width="20" Height="20"/>
the textblock is empty in XamlPad, but everything else works as expected.

How to create Carousel like control?

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.

How can I dynamically create a list of label and textboxes in WPF?

I am trying, and failing, to create a list of labels and text boxes in WPF. I am a ASP.NET developer and the XAML experience is slightly overwhelming me at the moment... I have Apress' Pro WPF 3.0 book infront of me and finding it zero use...
At the end of my process I want users to complete some questions that will be dynamic to that user. I have an Array of objects, with properties for a "Question" and "Answer".
I want the "Question" to appear as the label.
I've been looking at ListView controls, but this just seems to give me an Excel style grid which I am not interested in.
In the ASP.NET world I'd use a GridView, with two columns, one with a Label, the other with a TextBox. On submitting the page I'd loop through the items in the grid view to pick out the values of the textboxes, and associate back to the correct object in the Array.
Could someone please direct, or show me what controls I should be using in WPF?
Extra info;
It's a desktop WPF application using .NET 4, Visual Studio 2010.
Cheers
Stu
There's absolutely no need to use a DataGrid for something as simple as this. Using a basic ItemsControl will do what you're looking for without the overhead of such a complex control. This approach is also very easy to customize by just changing the ItemTemplate.
<ItemsControl ItemsSource="{Binding QuestionsToAnswer}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding QuestionText}"/>
<TextBox Text="{Binding AnswerText}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I agree with Scott that DataGrid is probably the way to go. Here are some decent turotials to get you started:
http://www.c-sharpcorner.com/UploadFile/mahesh/WpfDGP109272009111405AM/WpfDGP1.aspx
http://www.wpftutorial.net/DataGrid.html

Tools\addin's for formating or cleaning up xaml?

I'm guessing these don't exist since I searched around for these but I'm looking for a few tools:
1) A tool that cleans up my xaml so that the properties of elements are consistent through a file. I think enforcing that consistence would make the xaml easier to read. Maybe there could be a hierarchy of what comes first but if not alphabetical might work.
Example before:
TextBox Name="myTextBox1" Grid.Row="3" Grid.Column="1" Margin="4"
TextBox Grid.Column="1" Margin="4" Name="t2" Grid.Row="3"
Example after:
TextBox Name="myTextBox1" Grid.Row="3" Grid.Column="1" Margin="4"
TextBox Name="t2" Grid.Row="3" Grid.Column="1" Margin="4"
(note < /> has been remove from the above since control seem to have issues parsing whe the after section was added)
2) Along the same lines as above, to increase readability, a tool to align properties, so from the above code example similar props would start in the same place.
<TextBox Name="myTextBox1" Grid.Row="3" Grid.Column="1" Margin="4"/>
<TextBox Name="t2" Grid.Row="3" Grid.Column="1" Margin="4"/>
I know VS has default settings for XAML documents so props can be on one line or separate lines so maybe if there was a tool as described in (1) this would not be needed...but it would still be nice if you like your props all on one line.
3) A tool that adds X to the any of the Grid.Row values and Y to any of the Grid.Column values in the selected text. Every time I add a new row\column I have to go manually fix these. From my understanding Expression Blend can help with this but seem excessive to open Blend just to increment some numbers (and just don't grok Blend). Maybe vs2010 with the designer will help but right now I'm on VS08 and Silverlight.
Any one know of any tools to help with this?
Anyone planning to write something like this...I'm looking at you JetBrains and\or DevExpress.
Thanks.
Try out Kaxaml. It has a couple auto-formatting tools like this.

WPF Ribbon ApplicationMenu Alignment on the Right?

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

Resources