I want to add an adunit to the TopAppBar of the page.
<Page.TopAppBar>
<AppBar IsOpen="True">
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="be1500d6-9ca7-4a0b-a479-0db279d71e14"
AdUnitId="11191335"
HorizontalAlignment="Center"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Width="320"
Height="50" IsAutoCollapseEnabled="True"
/>
</AppBar>
</Page.TopAppBar>
This compiles and runs without error but after adding this to my code, the Frame.Navigate to this page is returning a false value.
How to correct it so that Navigation is successful? If this is not the right way then how can I make my ad stay on the top of the page always even on scrolling.
Windows Phone doesn't support a top AppBar. If you want to show your add at the top of the page then put it in a row of a Grid at the top of the page. Put the page content you want to scroll in a second row underneath it. Something like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<UI:AdControl Grid.Row="0" />
<GridView Grid.Row="1" /> <!-- or whatever else you want for the page content -->
</Grid>
Related
I'm trying to add a grid view at the bottom of the screen containing 'Current Playing' information about a media being played in a media player. The problem is that I want this view to be there no matter what is the page visible.
The main layout is a Master-Detail page for the navigation menu panel, where the detail page should contain everything.
The detail page can be a content page, a navigation page (mostly) or a modal content page. However, if I might only choose one, I would choose it to be a navigation page.
So, simply I want to do something like this:
<MasterDetailPage.Detail>
<ContentPage>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Page x:Name="viewPort" Grid.Row="0">
<!--This page source is dynamically set from the code behind...-->
</Page>
<Grid Grid.Row="2">
<!--Here should be the rest of my grid structure...-->
</Grid>
</Grid>
</ContentPage>
</MasterDetailPage.Detail>
But wrapping a page inside another view/page is not possible, I tried also modifying the Master-Detail page control template to add that grid at the bottom of the detail page and display whatever page above it, but no luck in finding the original template or even setting a template for Master-Detail layout...
I'm new to Xamarin but somewhat experienced with c# and xaml, any help is really appreciated.
You could use ContentPresenter with control template.
Create a control template in App.xaml> Application.Resources> ResourceDictionary.
<!-- Grid Template -->
<ControlTemplate x:Key="GridTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" />
<Label
Grid.Row="1"
BackgroundColor="Accent"
Text="Grid Template" />
</Grid>
</ControlTemplate>
And then use it in detail page.
ControlTemplate="{StaticResource GridTemplate}"
I have uploaded the project on GitHub for your reference.
https://github.com/WendyZang/Test/tree/master/ControlTemplate_ContentPresenter/MasterDetailPageDemo
Updated:
For data binding of control template, you could use TemplateBinding.
Create a AppViewModel:
public class AppViewModel
{
public string Name { get; set; } = "Name_A";
public AppViewModel()
{
}
}
App.xml:
<ControlTemplate x:Key="GridTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" />
<Label Grid.Row="1" BackgroundColor="Accent" Text="{TemplateBinding BindingContext.Name}" />
</Grid>
</ControlTemplate>
Set the binding in each page which use the control template.
this.BindingContext = new AppViewModel();
I'm developing an application using WPF by c#.
I have 2 frames next to each other. The above will not change and just updated(like Facebook toolbar).
The bottom frame will change by clicking on some buttons. (it is something like masterpage in ASP).
I don't want to set a height and width for window or for frames. The problem is when I make the window full screen there is a space between two frames.
However none of the vertical/horizontal alignment stretch does not work.
<window>
<Frame VerticalAlignment="Top" Background="Crimson" />
<Frame VerticalAlignment="Bottom" Background="Black"
/>
</Window>
I want to create something like the this site as you see. the notify section and the main page.
EDIT:
i can put them next to each other just by set the height, but when i make full the window the heights stay and the yellow space becomes appear, so i want to find a way to put them Exactly next to each other in every window size.
As Mitch noted in the comments, you could place the two frames in a grid instead, and let the grid size the items.
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
</Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
I have two elements inside a Grid, the first one has a dynamic height and the second has a fixed height. When the user resizes the window the first element is supposed to grow bigger until the scrollbar does not show. Here's the code:
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<ScrollViewer>
<!-- MORE STUFF HERE -->
</ScrollViewer>
</Grid>
<Button Grid.Row="1" Width="126" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
And when it's small looks like this:
When it's big it looks like this:
How can I attached the Button the bottom of the first element, or make the first element stop growing after the content is displayed?
Set the Grid's VerticalAlignment to Top instead of Stretch:
<Grid VerticalAlignment="Top">
...
</Grid>
I'm starting to learn how to program and I have a problem.
I am making an application in C # WPF.
I want to put a scrollbar on a grid and not activate it.
I searched and tried several things I found, but I have not gotten it right.
As the window is larger than the monitor, what I want is to put a scrollbar to access the bottom of the window.
The last thing I tried is this.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="921*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
<ScrollBar Height="921" HorizontalAlignment="Left" Margin="761,0,0,0" Name="scrollBar1"
VerticalAlignment="Top" Width="12" Maximum="960" Minimum="1" SmallChange="1" />
</Grid>
With this comes the scrollbar, but the window does not move.
Thanks in advance and forgive for writing. I made it with google translator.
The content that you wish to scroll should be a child of a ScrollViewer.
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="921*" />
<RowDefinition Height="0*" />
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
For the purposes of layout, The child is assumed to have infinite avaliable width and height. This means that the child of a scrollviewer will never behave as it would with restricted space (unless you set maxwidth / maxheight).
NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.
How do I keep the button in place?
My XAML code:
<Window x:Class="Plugin_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
<Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
<ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
</Grid>
If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!
Here is a Grid example that does what you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" />
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Push Me" />
</Grid>
I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.
Here is a DockPanel version.
<DockPanel>
<Button DockPanel.Dock="Bottom" HorizontalAlignment="Right" Content="Push Me" />
<ListView />
</DockPanel>
To create your buffer between the button and the window chrome you could do a few different things:
<Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
<Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
<Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).
<Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).
Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.
A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).
So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.
(this ends my "usability and look-and-feel is important" side note) :)
<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>
Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.
<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
Looking at the sample code, it is your margins and the alignment you have that are probably causing that.
Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>