Getting rid of strange margin above pivot in WP8.1 - xaml

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.

Related

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

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>

Check Box DataBinding / MinWidth Problems

I am creating a UWP application and I want a simple check box, no text, for each entry in my ListView. If I add a checkbox control to my template for the listview, I get a big gap after the checkbox for the Content - event when the content is empty.
If I turn on multiselect in the listview so I get a nice checkbox for each row, I can't seem to figure out how to databind the check box for each row in the listview to the Selected property of my ViewModel.
Below is a picture of what I want the area of the check box to look like. This was generated using the SelectionMode="Multiple" on the listview. Remember - the problem with this approach is I can't seem to find a way to bind the check box to the Selected property of my ViewModel class.
Below is what it looks like if I remove the SeletionMode property and add a check box to my ItemTemplate. As you can see there is a huge gap between the check box and the area where the image will be due to the Checkbox control's minimum width of 120.
Any suggestions would be greatly appreciated.
You could just set the MinWidth on the Checkbox itself
eg
<StackPanel Orientation="Horizontal">
<CheckBox x:Name="MyCheck" IsChecked="True" MinWidth="30"/>
<Rectangle Fill="Red" Width="100" Height="50"/>
</StackPanel>
The alternative is creating a copy of the Checkbox Styles and Template but that seems like overkill here.

How do I make a more asthetically pleasing page in Expression Blend

I have created my first Expression Blend page. It looks flat and dull. WIthout going overboard, how do I add a touch of depth to this page.
http://i67.photobucket.com/albums/h292/Athono/looks%20like%20poo_zps3wt7phoj.png
I have changed it so that the LayoutRoot has a grey background and I have changed the textboxes like so:
<Border BorderBrush="#FF121111" BorderThickness="2" Grid.Row="0" Margin="90,194,192,0" Height="45" VerticalAlignment="Top" Background="White">
<TextBlock Height="33" Margin="6,6,6,0" VerticalAlignment="Top" TextWrapping="Wrap" Foreground="Black" d:LayoutOverrides="HorizontalAlignment"/>
</Border>
But the textboxes still do not have the 3d depth that typical areas that ask for user input have. For example, if you click to open a file in most programs, the area to add a file name looks as if it is more depressed (pushed down) so that the top of the box is defined and has a thicker line than the bottom of the text box.
I have a nother, simpler question that is related to this. How do I do a test run of the page in Expression Blend to see how it performs and looks when I do a mouse over and mouse click on the controls?

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.

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