In my windows 8 application i have a advertisement in right side of window. When i choose the about page from my charm bar settings pane, the ad sdk control remain in top of the about page.. looks like below...
MainPage.xaml,
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ads:AdControl Width="160" Height="600" IsEnabled="False" HorizontalAlignment="Right" AdUnitId="10043134" ApplicationId="d25517cb-12d4-4699-8bdc-52040c712cab"></ads:AdControl>
</Grid>
About.xaml(User Control),
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="#000000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="butAboutus" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource SnappedBackButtonStyle}" />
<TextBlock x:Name="pageTitle" Grid.Column="1" Foreground="White" Text="About" Style="{StaticResource PageHeaderTextStyle}" FontSize="30" Margin="0,0,27,39"/>
</Grid>
<Grid Grid.Row="1" Background="White">
<StackPanel Orientation="Vertical" Margin="20,20,0,0">
<TextBlock Text="Sample about" FontSize="15" Foreground="Black" TextWrapping="Wrap" Margin="0,0,0,15"/>
</StackPanel>
</Grid>
</Grid>
what am i doing wrong? how can i solve this problem...?
Thanks in advance.
You will have to hide the ad control when you want to display something on top of it. The ad control uses the WebBrowser, which has the (annoying) property of always being on top.
As Wilbur suggested the adcontrol currently uses webview (browser control) and would always appear on top, therefore you'd need to toggle it's visiblity before showing the flyout or popup control. The other nuisance of this control is that it will also take away the focus from the app whenever the ads are refreshed (you might want to set IsEnabled property to false to fix that).
Personally in my view webview and adcontrol are the two controls that needs to be re-written :(
Related
I have developed an UWP app allowing users to edit forms.
I would like to use a RelativePanel to show messages to the users on the Home page.
Theses message can concern forms management ("The form XXX has well been deleted", "The form XXX has well been saved"), or the synchronization ("Sync ended successfully", "Impossible to sync datas").
The Home page is based on a Grid that contains 3 rows:
a filter searchbox
the list of the forms
sync informations
Here is a screenshot of this page:
I would like to display the RelativePanel in the 3rd Row, above the sync informations, but only during 2 seconds. Then the RelativePanel will disappear, and the sync informations must be visible again.
I also encounter a problem with the width of the RelativePanel: I would like a left/right padding of 150, but it doesn't seem to work:
My XAML code looks like this:
<!-- User + Last sync-->
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding CurrentUser.username}" />
<StackPanel Grid.Column="1"
Orientation="Horizontal"
HorizontalAlignment="Right">
<TextBlock x:Uid="HomeTextBlockLastSync" Margin="0,0,8,0"/>
<TextBlock Text="{Binding LastSync, Mode=TwoWay}" />
</StackPanel>
</Grid>
<!-- Form Status message -->
<RelativePanel Grid.Row="2"
Background="Cyan"
Padding="150,0,150,0">
<StackPanel x:Name="FormStatusPanel" Orientation="Vertical"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True">
<Border x:Name="FormStatusBorder" Margin="0">
<ScrollViewer VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Auto"
MaxHeight="150">
<TextBlock Text="TestTestTest"
x:Name="FormStatusBlock" FontWeight="Bold"
TextWrapping="Wrap" />
</ScrollViewer>
</Border>
</StackPanel>
</RelativePanel>
=> Would you have an idea on why the Padding doesn't work? What is a better way to hide RelativePanel after 2 seconds? With the VisualStateManager or by the code?
I've been looking on Google and all over the place for the answer on this, but I'm coming up empty.
I'm trying to make a few windows on my Windows universal app software. I want it to be able to resize itself as the user makes the window bigger or smaller. I can't find anywhere on the properties where it says anchor, and I'm not finding any help with the auto complete with the .xaml.
Any help on this will be welcome
UPDATE for – Justin XL or anyone that can answer
Below is a image of what I'm seeing. I'm trying to get all 4 blocks to take equal space at any given time. Obviously that isn't what I'm getting.
Anyways, I hope you can take a quick look at the code below the picture to tell me what I'm doing wrong.
The code below is what I'm using. I'm not sure if I'm doing something wrong since this is my first Windows app.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Gainsboro" Grid.Column="1" Width="Auto" Height="Auto">
<Button x:Name="Click_Me" Grid.Column="1" Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Click_Me_Click" Width="107" /></Grid>
<Grid Background="Gainsboro" Grid.Column="1" Grid.Row="1" Width="Auto" Height="Auto">
<TextBlock x:Name="textBlock" HorizontalAlignment="Center" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Grid.Row='1'/></Grid>
<Rectangle Fill="Gainsboro" Width="8" Margin="622,0,10,0" VerticalAlignment="Stretch"/>
<Grid Grid.Column="0">
<WebView Name="Video" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="Auto" Height="Auto" Grid.Row="0" Grid.Column="0" />
</Grid>
First, you should remove HorizontalAlignment="Left" on your MySplitView to make the content fill the entire page.
Also, I would change your hard-coded Margin on the Rectangle to -
<Rectangle Fill="Gainsboro" Width="8" VerticalAlignment="Stretch" HorizontalAlignment="Right" Margin="0,0,-4,0" />
Note the -4px(right margin) here. It's because the Rectangle itself is 8px wide and aligned on the edge of the first cell in the Grid, so I shifted it to the right by 4px to make it absolutely sit in the middle of the page.
Hope this helps!
I'm struggling to understand how the xaml controls can help me accomplish the following layout:
I have a 3-column layout. The leftmost and center columns have listviews. The rightmost column simply has a clickable (tappable) stackpanel that navigates elsewhere. I want this stackpanel to be anchored to the right side of the page, halfway down (i.e. in CSS I would say right: 0, top: 50%).
My XAML is below. My strategy has been to create a horizontal parent stackpanel containing all 3 columns, and a vertical stackpanel with a textblock on top of a listview control in the leftmost and middle columns. However, the third stackpanel behaves in some unexpected ways:
It does not fill the horizontal space remaining to the right of the second stack panel. It seems to prefer to only take up the space required by whatever its child controls require. This means that I have to assign static values to child elements to try to line the clickable control up with the right side of the page. This means that when screen resolutions are different than what I'm designing for, this clickable control will be either off the right side of the page, or toward the middle of the page.
I can't coerce the clickable element in the third column (stackpanel, or any other control I try to use) to move halfway down the page. As I mentioned above, I want it to be halfway down the page, but it stubbornly sits at the top of its containing stackpanel.
I've looked at the canvas control, but don't want this to be static - this is so easy in CSS, I'm not sure why it's so complicated in XAML.
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1160"/>
<ColumnDefinition Width="206"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>
<StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<StackPanel
Orientation="Vertical"
Margin="0,0,40,0">
<StackPanel
Height="100"
Width="400"
HorizontalAlignment="Left"
Margin="40,15,0,0">
<StackPanel.Background>
<SolidColorBrush>
<Color>#FFFFFF</Color>
</SolidColorBrush>
</StackPanel.Background>
<TextBlock
Text="Announcements"
FontSize="42"
FontWeight="Light"
TextAlignment="Left"
Padding="0,25,25,25">
</TextBlock>
</StackPanel>
<ListView
HorizontalAlignment="Left"
Height="475"
Margin="40,15,0,0"
VerticalAlignment="Top"
Width="400"
ItemsSource="{Binding Incidents}"
IsItemClickEnabled="True"
SelectionMode="None"
ItemTemplate="{StaticResource Standard130ItemTemplate}"
ItemClick="Item_Click" >
</ListView>
</StackPanel>
<StackPanel
Orientation="Vertical"
Margin="40,0,0,0">
<StackPanel
Height="100"
Width="600"
HorizontalAlignment="Right"
Margin="0,15,40,0">
<StackPanel.Background>
<SolidColorBrush>
<Color>#FFFFFF</Color>
</SolidColorBrush>
</StackPanel.Background>
<TextBlock
Text="News from Yammer"
FontSize="42"
FontWeight="Light"
TextAlignment="Left"
Padding="0,25,25,25">
</TextBlock>
</StackPanel>
<ListView
HorizontalAlignment="Left"
Height="475"
Margin="40,15,0,0"
VerticalAlignment="Top"
Width="Auto"
ItemsSource="{Binding Incidents}"
IsItemClickEnabled="True"
SelectionMode="None"
ItemTemplate="{StaticResource Standard130ItemTemplate}"
ItemClick="Item_Click" >
</ListView>
</StackPanel>
<StackPanel Background="AliceBlue" Width="206" Height="628">
<TextBlock x:Name="stackPanel" Background="Black" Height="50" Width="20" HorizontalAlignment="Right" Margin="10,100,10,0" Opacity="0"/>
</StackPanel>
</StackPanel>
StackPanels only give enough space to their child elements as the need. I would recommend the following:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<!-- Right most column -->
</StackPanel>
</Grid>
This was the stack panel stretches to fit the column.
I have a Windows Phone 8 app using XAML/C#. My app has an ItemsControl that relies on a data template. My DataTemplate looks like the following:
<DataTemplate x:Key="myTemplate">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding DisplayName}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextLargeStyle}" TextTrimming="WordEllipsis" >
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem x:Name="customerMenuItem" Foreground="White" Header="View Customer Profile" Click="customerMenuItem_Click" Tag="{Binding Path=CustomerName}" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
</TextBlock>
<TextBlock Text="{Binding Summary}" TextWrapping="NoWrap" Grid.Row="1" Style="{StaticResource PhoneTextSmallStyle}" />
</Grid>
<StackPanel Orientation="Horizontal" Grid.Column="1"><!-- Stuff here --></StackPanel>
</Grid>
</DataTemplate>
This DataTemplate is referenced in the main part of my XAML as shown here:
<Grid x:Name="ContentPanel" Grid.Row="1" Grid.ColumnSpan="2" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl x:Name="myItemsControl" ItemTemplate="{StaticResource myTemplate}" ItemsSource="{Binding Customers}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>
Please note, the "toolkit" namespace comes from clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit. When I hold my finger (or mouse) on the TextBlock, a context menu appears. However, I never see the words "View Customer Profile". I just see a block box that represents the context menu itself. I know that the item is there though. I know because the customerMenuItem_Click event successfully fires. I have a MessageBox in there that shows the value of the Tag. That value is always correct. For some reason though the menu item text is not appearing. What am I doing wrong?
You put Foreground = "White". Context menu is on white background. That is why you don't see your menu item.
I want to display two columns in my Grid. The first is a textblock that is sometimes longer than the row meant to hold it. The second is a button. Is there a way to give the textblock as much room as possible while still leaving room for the button to go immediately after?
When I use the following code, the textblock will sometimes push the button outside the viewable area of the grid.
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Description}" HorizontalAlignment="Stretch" />
<Button Margin="4,0" Height="0" Width="16" Grid.Column="1" MinWidth="20" VerticalAlignment="Center" />
</Grid>
I've tried setting the first column definition Width="*", but then the button is always at the very end of the row, when I want it next to the text. Any suggestions?
This is in Silverlight 4.
Thanks.
EDIT
I want the grid to resize as the user changes the window size, so setting a hard limit on the grid size is no good. That being said, I was able to manually set the MaxWidth in the code behind when the TextBlock loads and when the window changes size. It's clunky, but it works.
Following will surely work..
<Grid x:Name="LayoutRoot" Background="White" Width="250">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock x:Name="textBlock" Grid.Column="0" Text="Text Box" VerticalAlignment="Top"/>
<Button x:Name="button" Grid.Column="1" Content="Button" VerticalAlignment="Top" Width="60"/>
</Grid>
Add Following Line to xaml.cs file in constructor..
public MainPage()
{
InitializeComponent();
textBlock.MaxWidth = LayoutRoot.Width - button.Width;
}
Let me know if there is any issue with it.
Thanks..