How do I make PivotItems in Pivot wrap around like a WrapPanel? - xaml

I would like to have the PivotItems in my Pivot to wrap around when the items exceed the App width much like a WrapPanel instead of the default scrolling. I tried setting up the Pivot.ItemTemplate as shown below but that didnt work. Thanks in advance.
<Pivot.ItemTemplate>
<DataTemplate>
<controls:WrapPanel />
</DataTemplate>
</Pivot.ItemTemplate>

There are many design mechanisms inside the HeaderTemplate of NavigationView and Pivot. It is very difficult to change it. But we could achieve a similar effect through layout. You could add a wrapPanel, then add controls inside the panel and use Frame to navigate to another page. As follows:
<StackPanel >
<wrap:WrapPanel x:Name="Itemgrid" Orientation="Horizontal" >
//add your control to show header
</wrap:WrapPanel >
<Frame x:Name="ContentFrame"/>
</StackPanel>

Related

Getting rid of strange margin above pivot in WP8.1

I have very frustrating problem. I have an WP8.1 app (WinRT - Universal) in which I use pivot control and above it I have search button (screen here: http://oi67.tinypic.com/2r5s13d.jpg ). Search button is in Grid.Column 0 and Pivot is in Grid.Column 1, but I have this strange margin (marked on screen) which I can't get rid of and it covers my search button (only half of it is active). My Grid.Column 1 and pivot should start on line closer to the word "TEST" and theoretically it is, but the second line (higher one) which shouldn't be there, it's there, it's empty but it's prohibit search button to be tapped. In header template I have a following code:
<Pivot.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}" FontSize="20" Margin="0,3,0,0" FontWeight="Normal"/>
</Grid>
</DataTemplate>
</Pivot.HeaderTemplate>
Can anybody help me?
Try add Margin inside Pivot Control etc. Margin="0,-20,0,0" and add pivot control behind from search button for you can tap this.

Placing an element exactly below another one on WP8?

I would like to place a GRID element just below another GRID element using XAML just like Android's layout below. How can it be done, if possible?
Is this all you're looking for?
<StackPanel>
<Grid/>
<Grid/>
</StackPanel>

How to manipulate items in C#

I'm making a Windows Store App using C# and XAML. How can I manipulate one single item in a GridView or a ListView?
According to certain logical conditions, I need to load or not the item in these containers. I have already tried using the property Visibility.Collapsed and Visibility.Visible of the item, but this just hides or shows the item and it is still loaded in the GridView/ListView, and is selectable.
Thanks for your help.
I reckon you meant to hide your GridViewItem without keeping space in view.
You just need to replace GridView's ItemsPanel with StackPanel or VirtualizingStackPanel.
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>

XAML: How to restrict a datagrid to its parents width

I have a [silverlight] WizardContainer control that hosts a number of wizard pages. The wizard fits nicely on its host form. If the page has narrow content it doesn't expand to fill the container. So I set HorizontalContentAlignment to Stretch. This works.
However if the wizard page contains a datagrid with lots of columns it stretches the page instead of autoscrolling itself - as its width is not fixed. If the following XAML is on a usercontrol with a width of 350 I want the grid to be 350 and have its own scrollbars. If the WizardContainer is made smaller than the page minwidth then the MainScroller should come into play.
<Grid x:Name="LayoutRoot" >
<ScrollViewer x:Name="MainScroller" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<ContentControl Margin="4" x:Name="WizardContainer" HorizontalContentAlignment="Stretch">
<Grid Background="Red" x:Name="WizardPage" MinWidth="300">
<sdk:DataGrid HorizontalAlignment="Left" Height="120" >
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
<sdk:DataGridTextColumn Width="150"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</ContentControl>
</ScrollViewer>
</Grid>
Note if I fix the width of the datagrid everything in this XAML works. But I want the grid to expand as the user resizes the form containing the wizardcontainer.
You have the DataGrid wrapped in ScrollViewer. This, effectively, tells the DataGrid that it has infinite available width. Since the DataGrid is not constrained, it'll take as much width as it's columns desire.
You can set HorizontalScrollBarVisibility="Disabled"if that fits your design (i.e. you need only vertical scrolling from your ScrollViewer). This will disable scrolling horizontally and will constrain the DataGrid on the horizontal axis.
DataGrid has a ScrollViewer in it's ControlTemplate. As a broad general rule: try avoiding a ScrollViewer-in-a-ScrollViewer situations. It's (almost) always a headache to debug and eventually you'll have to set something as a fixed size (or calculate the size on the fly).

Slider overflow

I have popup-like border in my page. There is slider inside the popup. The slider has range from 0 to 100, but when I slide it to the right edge I get somewhere near to vlaue 93. Slider is full but its maximum is 100. It seems that slider overflowed the parent container. I tried to use all combinations of margins and static widths, but without success. Can anyone tell me what I am supposed to set, to get it work?
Here is fragment of code:
<Grid x:Name="LayoutRoot" >
...
<Border VerticalAlignment="Center" Margin="24,0" Visibility="{Binding ...}">
<StackPanel>
<TextBlock Text="choose desired position" />
<Slider x:Name="sldGoto" Maximum="100" SmallChange="1" LargeChange="10" Value="93"/>
</StackPanel>
</Border>
</Grid>
With this code (value of slider set to 93) is slider full. What's wrong?
This is a known bug in the current release when using Slider on Windows Phone 7 with the standard control template. I recommend using the approach you found on Dave's blog for now.
Well I just find article with nice Slider ControlTemplate that just works.
I would still appreciate if anyone could confirm this behavior or told me what I did wrong.
Thanks