We Keep Coding

Get around grid in uwp

I'm trying to create 2 grid the first one have two buttons and the other one have a title I want to make the second grid get around the first one ...
here's my code>>
<Grid x:Name="pgtitle" >
<StackPanel x:Name="btn" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<AppBarButton Icon="More" Tapped="more_Tapped"/>
<AppBarButton Icon="List" Click="view_Click"/>
</StackPanel>
</StackPanel>
<RelativePanel x:Name="title">
<TextBlock x:Name="titletxt" Text="{Binding ViewModel.SelectedItem.Title}" FontSize="18" FontWeight="Bold" TextWrapping="Wrap"/>
</RelativePanel>
</Grid>
here's a picture for what am I trying to do>>

If you mean "get around" as in flow around, similarly to news articles and texts, that is not possible. All layout elements in XAML are rectangular and they don't take other sibling elements into account.
You can display the inner Grid in one column and other elements in second column, but the contents of such columns must be known beforehand.

Look into the RelativePanel element in UWP where you can place elements right or left of other elements. I think this can be achieved with that control.
For example, the RelativePanel will contain the smaller grid you have in your picture and will be the anchor to all other elements. You will have to set the other elements (children of the larger grid) to go on the right or bottom of the smaller grid.

Custom AppBarButton and AppBarToggleButton in Windows Apps [duplicate]

I have a very specific question. I could not find any answers for this exact problem, so I used the trial and error method to pinpoint the problem. Here is an example code I have the problem with:
<Page.BottomAppBar>
<CommandBar x:Name="MainMenuCommandBar" ClosedDisplayMode="Minimal">
<CommandBar.PrimaryCommands>
<AppBarButton x:Name="otherCommandButton" Label="Egyéb" Icon="List" Click="otherCommandButton_Click" Style="{StaticResource appbarButton}">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="SecondaryFlyout1" Text="Névjegy" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout2" Text="Adatbázis mentés" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout3" Text="Adatbázis visszaállítás" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout4" Text="Terminál törlése" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout5" Text="Jelszavas védelem" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout6" Text="Nyelv váltás" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout7" Text="Betűméret" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
<MenuFlyoutItem x:Name="SecondaryFlyout8" Text="Kilépés" Style="{StaticResource BottomAppBarFlyoutStyle}"/>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
<AppBarButton x:Name="refreshCommandButton" Label="Frissítés(Bank)" Icon="Refresh" Style="{StaticResource appbarButton}"/>
<AppBarButton x:Name="syncCommandButton" Label="Szinkronizál(PC)" Icon="Sync" Style="{StaticResource appbarButton}"/>
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
I wanted to apply a custom style for the appbarbuttons inside a commandbar, because the text in the Labels are too long, and I can't see the whole text. So I thought, I will make the text smaller, or the appbarbutton wider. The designer showed me the changes, but when I run the program, nothing changes. The appbarbuttons use the default styling, no matter what I do. So the text don't get smaller when I run the program.
After this, I tried to pinpoint the problem. I tried to edit the template too, but the "edit a copy" command is grayed out. I thought this is weird, because I sweeped through MSDN, and there I saw that the appbarbuttons in fact has a style which I could edit. I copied the default style, made changes, applied it into my app.xaml as a custom style, but I met with the same problem as before. Nothing changed, no matter what I altered in the style. After all these failures, I put an appbarbutton OUTSIDE a commandbar. And at this case, everything works fine. I can edit a copy of the template, and the changes reflect when I run the program. Another weird case is, that the menuflyoutitems can be styled inside the commandbar.
Sorry for the lengthy explanations, I wanted to present what I know already. My question in short that, is there any way to style an appbarbutton inside a commandbar? Or if not, is there any alternative to create a custom commandbar?

The CommandBar on Windows Phone is system UI and cannot be customized by the app beyond setting it's foreground and background colors.
If you want to customize the individual buttons you'll need to implement your own panel for them instead of using the app bar. You can place a horizontal Stack Panel at the bottom of your page and include customized AppBarButtons in it. If you want it to shoe and hide you will need to set your own logic to detect the triggering input and then apply an animation to side it open and closed.

Popup overlaps application bar

I'm trying to show a fullscreen popup along with application bar. To do this I'm using such code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Name="myButton" Content="Show PopUP" Click="myButton_Click"/>
<Popup x:Name="myPopup">
<Grid Name="PopupsGrid" Background="ForestGreen">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="This is my PopUp"/>
</Grid>
</Popup>
</Grid>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="Done" Icon="Setting"/>
<CommandBar.SecondaryCommands>
<AppBarButton Label="Command"/>
</CommandBar.SecondaryCommands>
</CommandBar>
</Page.BottomAppBar>
private void myButton_Click(object sender, RoutedEventArgs e)
{
var bounds = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().VisibleBounds;
PopupsGrid.Height = bounds.Height - 25; // to show the problem - normally we can substract BottomAppBar.Height
PopupsGrid.Width = bounds.Width;
myPopup.IsOpen = true;
}
I've figured out that we can use ApplicationView.GetForCurrentView().VisibleBounds to calculate the desired height. So far so good, but when I open the popup it overlaps the application bar (see picture 2). On the other hand once we open the appbar, it seems to be overlapped partially (see picture 3).
I've tested it both on desktop and mobile and the same problem occurs.
Am I missing something? How to put application bar above popup?

I don't think we can make sure commandbar is always above the popup. The popup command you saw in the third screenshot is actually a popup control so it can be above "myPopup" in this scenario. But, if you set the commandbar's IsSticky and IsOpen to true, when you click the button to show popup, it will hide the popup command. Popups follows this rule: latest on the top.
For the "overlapped partially" issue, instead of making the popup full screen, I think we can dynamically change the popup's height based on Commandbar's height.
One thing you may not notice is the height of LayoutRoot(Child of CommandBar) is larger than CommandBar's. By checking the default style of the CommandBar, you can find it uses Grid.Clip and RectangleGeometry.Transform to control the size of the commandbar we can see. You can also check it in the Live Visual Tree in VS. In my case, mycommandbar's Actual height is 48, and LayoutRoot's Actual Height is 60.
So as a workaround, in Compact mode, we can dynamically change the height of "myPopup" by listening the IsOpen property of the commandbar. If IsOpen = true, then substract the LayoutRoot's height(60), if IsOpen = false, substract the height of CommandBar(48).
This works for me.

Try to give your layout some padding ?

Notebook-like background for a TextBox in a Windows Phone App

I am trying to create an application to take notes for windows phone 8.1
I want to give the user,a notebook type of feel.
For this I have created the UI for notes, the XAML is:
<Grid Margin="0,12.333,0,-0.333">
<Grid.Background>
<ImageBrush ImageSource="Images/notebookpaper.jpg"/>
</Grid.Background>
<TextBox TextWrapping="Wrap" Background="{x:Null}" Text="" BorderBrush="{x:Null}" HorizontalAlignment="Left" Margin="60,96,0,0" VerticalAlignment="Top" Height="480" Width="340" BorderThickness="0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" FontFamily="Arial" TextChanged="TextBox_TextChanged" AcceptsReturn="True" FontSize="24.8"/>
<TextBlock Text="Date : " HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Margin="246,10,0,0" Height="20" Width="59"/>
</Grid>
The image notebookpaper.jpg looks like this:
When user types in the text in text box, it looks like:
The problem is that, some characters appear a little above the line, some exactly on the line etc. which looks odd. Also, when I try to scroll, UI appears as:
The text appears striked out, as only the text scrolls and not the background image.
Also I want to be able to provide user a list of 5-6 fonts out of which they can select which one to use for typing the notes.
What should I do, so that the text appears properly aligned and text scrolls properly.
Is there any other way to do this ?

It looks like you have two problems:
Varying line height
Scrolling doesn't match the lines
To solve the first problem, you can probably work with TextBlock.TextLineBounds, talked about a bit in this MSDN blog post and the TextLineBounds enumeration documentation. This only seems to apply to TextBlocks, so you might have to swap between a TextBlock and TextBox as users edit their text.
To solve the second problem, the TextBox styles and templates page has a lot of helpful info. It looks like you can make your ImageBrush the background of your control by overriding TextBoxButtonBackgroundThemeBrush. If that doesn't work when focused, you may have to take the entire template given on the linked page and edit it to put your image in the background (there's a lot of XAML, but you should just be able to put your image in BackgroundElement or just before it).
If it still doesn't scroll, you can try setting ScrollViewer.Background instead; if that doesn't work, you'll need to handle the ScrollViewer.ViewChanging or ScrollViewer.ViewChanged events (probably by overriding it) so that it you can transform the background image by the amount of pixels the scrollviewer has moved.
You can also find the ScrollViewer in your code-behind (and skip dealing with the template) by using VisualTreeHelper. This would allow you to set the background of the ScrollViewer and/or subscribe to its events. This however is more brittle than the other methods and is usually a last resort.

Pivot overlapping other elements in WP 8.1 Universal app (and automatically changing margin)

The following XAML shows the content of a Windows Phone 8.1 Universal app page. The idea is to have a bar on top of a pivot. But the pivot is overlapping the bar whereas the sample grid in blue is working as expected.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Background="{StaticResource PhoneAccentBrush}" Height="50" />
<Pivot Grid.Row="1" Background="Green" Width="200" HorizontalAlignment="Left" />
<Grid Grid.Row="1" Background="Blue" Width="200" HorizontalAlignment="Right" />
</Grid>
The resulting Page looks like this:
Where is this "negative margin" coming from?
How can it be avoided?
BTW: Just setting a margin is not a solution as it introduces other problems, for example a jumping GUI when using a SemanticZoom control, I need to know the root cause of the problem to solve it...
Info: It seems that the Windows Phone Pivot automatically changes the margin depending on the current screen settings (status bar shown/hidden). So if your app changes the state of the status bar in some circumstances you will end up having a jumping/changing pivot control.

I've found a solution and created a simple attached property for the Pivot control.
The attached property can be used this way:
<Pivot controls:PivotExtensions.DisableAutoMargin="True">
<PivotItem Header="A">
...
</PivotItem>
<PivotItem Header="B">
...
</PivotItem>
</Pivot>
The class with the attached property can be found here:
http://mytoolkit.codeplex.com/SourceControl/latest#MyToolkit.Extended.WinRT/Controls/PivotExtensions.cs
Downside: You cannot override the template anymore as the attached property changes the template already...

Overriding the control template doesn't seem to work; there is some code in the control that's setting the margin after construction. Also setting the Margin on the offending grid on the Loaded event doesn't work either, the negative margin code runs after that.
The only way I found to make the odd behavior go away was to ask your UI to overlap the status bar:
ApplicationView.GetForCurrentView()
.SetDesiredBoundsMode(ApplicationViewBoundsMode.UseCoreWindow);
Then the Pivot control figures that it doesn't need to try and cover the status bar. Note that you'll now have to give room in your page layout to prevent overlap with the status bar.