How to change height of NavigationView top panel - xaml

Problem
I'm using a NavigationView in my UWP application with the the PaneDisplayMode property set to Top. I've added a few menu items, but I'm having trouble adjusting the top pane's height to fit the menu items. At the moment, the pane items are getting cropped.
What Have I Tried?
I've tried to adjust the NavigationView's Height property, but it has no effect on the height of the top bar, only changing the height of the entire NavigationView (as one would expect).
Code
Here is my current XAML code:
<NavigationView
x:Name="navMain"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
IsTabStop="False"
PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem
Content="ITEM 1"
FontSize="60"
Tag="Page1" />
<NavigationViewItem
Content="ITEM2"
FontSize="60"
Tag="Page2" />
<NavigationViewItem
Content="ITEM 3"
FontSize="60"
Tag="Page3" />
</NavigationView.MenuItems>
</NavigationView>
Desired Result
I would like to adjust the top pane's height, preferably using only XAML, so that the menu items can fit and not be cropped.

This issue is due to the default height of NavigationViewTopPane is 40. You set the FontSize="60" for the NavigationViewItem is too larger.
To solve this issue, you need to edit the ControlTemplate of NavigationView. An easy way is to follow the Use tools to work with themes easily document to edit a copy NavigationView style.
Then, you need to find a Grid named 'TopNavGrid' in the ControlTemplate. The default looks like this <Grid x:Name="TopNavGrid" Height="{ThemeResource NavigationViewTopPaneHeight}" ..., you need to change the height to an appropriate value. For example, <Grid x:Name="TopNavGrid" Height="100" .... Then, the menu items will not be cropped.

Related

Windows Phone 8.1 XAML Image inside ToggleButton adds mystery padding

I'm working with a toggle button and rather than show text I want to show an image so I have this:
<ToggleButton Grid.Column="1" IsChecked="true" MinWidth="50" MinHeight="0" BorderThickness="0" HorizontalAlignment="Center">
<Image Source="ms-appx:///Assets/Icons/phonebutton.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</ToggleButton>
I have the transform to make the image a bit smaller so it's "inside" the button instead of filling it.
However, no matter what I do the button has a large padding around the image, even though the image itself has no margins or padding. I've set margin=0 on everything but the ToggleButton insists on putting space around the image, so the button is larger than it needs to be and cuts off inside the grid row it's in (which has a height="*")
I want the toggle button to "shrink" to fit in the row but still show the full image inside ...
while typing this the autosuggest found this link ToggleButton does not fill the area(windows phone) and by adding the style PhoneTouchTargetOverhang it does look better but then cuts off the image at the bottom unless I add negative padding to the togglebutton.
Anyone have any idea what I'm doing wrong?
Is there any way to disable it?
I have added the following margin to an image of 512x512:
<Image Source="/Assets/award4.png" Stretch="None" RenderTransformOrigin="0.5,0.5" Margin="-100,0,-100,0">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
And it fits centered

Multiple TextBlocks inside ScrollViewer-Windows phone 8

We have put a scroll viewer inside a content panel in design page of a databound app. We have to add more number of textblocks inside the scrollviewer which we cannot do by dragging and dropping from the toolbar as the design shows only three textblocks...
You can add the textboxes manually and specify it's margin. You don't need to drag and drop. For example:
<Grid x:Name="Content Panel">
<ScrollViewer>
<TextBox x:Name="textbox_1" Margin="10,0,0,0"/>
<TextBox x:Name="textbox_2" Margin="10,10,0,0"/>
<TextBox x:Name="textbox_3" Margin="10,20,0,0"/>
<TextBox x:Name="textbox_4" Margin="10,30,0,0"/>
..and so on.
Margin parameters are Left, Top, Right and Bottom. Keep increasing the top margin to push the control below.

Trouble laying out GridView contents?

I have this grid-view loading dynamic content correctly. However I can't quite figure out how to make it fill how I want. I want the content to start in the upper left corner and then create instance going downward until no more can fit (This should be 4) then start back at the top to the right of the original item.
The maxRowsOrCols property give me the behavior I desire, but I will definitely be exceeding 4 columns.
Please teach me.
You can use an ItemsPanel with the WrapGrid. The Orientation property is Horizontal or Vertical first. This should allow you to set your layout as required, depending on screen size and ItemTemplate.
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximiumRowsOrColumns="4" Orientation="Vertical"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

Icons in an Expression Blend tree view

I'm getting settled in with using Expression Blend, and there is one thing I am trying to do that I can not figure out for the life of me.
I want to have a tree where each text item has an icon before the text (trying to create something like a folder tree view). I created a sample data source and each item has two properties. An image and a line of text. the problem is that rather than the icon being before the text, the icon is really big and has a new line before the text. How do I correct this? Thanks for your help!
You can see what I'm getting here: http://imgur.com/daDaz.png
Edit:
The solution I came to involved editing the MainWindow.xaml. I set the property names in the data tab to 'TreeIcon' and 'TreeLabel', then I added an orientation attribute to the stackpanel and changed the icon height/width to something more agreeable:
<StackPanel Orientation="Horizontal">
<Image Source="{Binding TreeIcon}" HorizontalAlignment="Left" Height="24" Width="32"/>
<TextBlock Text="{Binding TreeLabel}"/>
</StackPanel>
Without the 'Orientation' attribute, it defaulted to vertical, so setting it to 'Horizontal' got the icon and text positioned properly. Setting the image height to 24 makes the icon roughly a good size for the text it's next to. The width is set to 32 because when it was at 24, the icon and the text were directly next to each other, with no padding at all. Upping the width to 32 padded some padding to the left.
Is this silverlight or WPF? Have you looked at your style template to find the content controls and see if they're set with a maxheight or maxwidth property and perhaps a stackpanel with Horizontal orientation?

Change background position when WP7 Page changes to Landscape

I am working on a Windows Phone 7 project with a panorama on the MainPage and multiple simple pages. All my pages have a background set this way:
<local:PhoneApplicationPage>
<Grid Background="{StaticResource PageBackground}">
content here
</Grid>
</local:PhoneApplicationPage>
PageBackground is an application resource set in default.xaml and light.xaml this way:
<ImageBrush x:Key="PanoramaBackground" ImageSource="/Resources/PanoramaBackground01Dark.jpg" Stretch="None" />
<ImageBrush x:Key="PageBackground" ImageSource="/Resources/PageBackground01Dark.jpg" Stretch="None" />
The PageBackground01Dark.jpg picture is of size 800x800 px.
When a page is displayed in the Portrait orientation, the picture is centered correctly horizontaly and the picture height corresponds to the page height. This is fine.
When a page is displayed in the Landscape orientation, the picture width corresponds to the page width but the picture is then centered vertically.
I would like my background picture to be "topped" in the page.
The Background property of a Grid is a brush with no interesting options. I would like not to create 2 pictures for this. There should be an obvious solution. Here is the result I would like to have:
Oh, the solution is simple. The Background property is of type Brush but it's in fact an ImageBrush. So the solution is:
<ImageBrush x:Key="PageBackground"
ImageSource="/Resources/PageBackground01Dark.jpg"
AlignmentY="0" />

Resources