I have the following Popup that I am using which is by default in the upper left hand corner of the screen. I would like to be able to center this within my view so that I can stretch it to the width and height of the screen as well and change the opacity. I would like the user to be able to see what is behind the popup when it is displayed on the screen, but have the popup cover everything as well. What I have so far is as follows
<Grid x:Name="filterGrid">
<Popup x:Name="trialPopup" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.5">
<Border Margin="3" BorderBrush="{StaticResource PhoneForegroundBrush}">
<StackPanel Background="#FF1BA1E2">
<TextBlock x:Name="modeTextBlock" HorizontalAlignment="Center"/>
<TextBlock Text="Do you wish to purchase the application?" TextWrapping="Wrap" HorizontalAlignment="Center"/>
<Grid Margin="0,10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width=".5*"/>
</Grid.ColumnDefinitions>
<Button x:Name="purchaseButton" Grid.Column="0" Content="purchase" Click="popupButton_Click"/>
<Button x:Name="cancelButton" Grid.Column="1" Content="cancel" Click="popupButton_Click"/>
</Grid>
</StackPanel>
</Border>
</Popup>
</Grid>
Whenever I try to set Width="Center" and Height="Center" within the Popup element like the following
<Popup x:Name="trialPopup" HorizontalAlignment="Center" VerticalAlignment="Center">
The top left corner is what is centered, and so the popup is not centered in the middle of the control itself. Is there a way to calculate the proper dimensions based on the popup width and height as well as the page width and height and apply this accordingly? Or is there a way to do this correctly within XAML? Also, the Opacity value is not being set?
Center of Page:
<Popup PlacementTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}" Placement="Center" />
Center of Window:
<Popup PlacementTarget="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" Placement="Center" />
Try using Offset properties of Popup:
trialPopup.VerticalOffset = - ((FrameworkElement)trialPopup.Child).ActualHeight / 2;
trialPopup.HorizontalOffset = -((FrameworkElement)trialPopup.Child).ActualWidth / 2;
The Opacity will work when set for the Popup.Child, but I don't know why it won't work on Popup.
Related
I want a grid to stretch across the screen while also having a shadow effect applied, for some reason I can't the grid to stretch when placed inside of a DropShadowPanel.
Here is an example of the desired result, but without a shadow effect:
<Grid Background="LightBlue">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top" Margin="40"/>
</Grid>
Result:
Here is my xaml with a DropShadowPanel:
<Grid Background="LightBlue">
<controls:DropShadowPanel HorizontalAlignment="Stretch" Margin="40">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top"/>
</controls:DropShadowPanel>
</Grid>
And this hides the second grid entirely.
Why does the grid act differently inside a DropShadowPanel?
And this hides the second grid entirely.
The problem is you have not set HorizontalContentAlignment property of DropShadowPanel. I have modified your code like the following. And it works.
<controls:DropShadowPanel Margin="40"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
>
<Grid Background="Red" Height="200" HorizontalAlignment="Stretch"/>
</controls:DropShadowPanel>
I want to place an image at top left of screen. and a TextBlock at center of same line as image placed. Means at the top of screen there should be an image at left and a TextBlock at center. I tried like below. But both image and TextBlock are seems to be aligned at center.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="AliceBlue" VerticalAlignment="Top">
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50" />
<TextBlock Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70" />
</StackPanel>
Just use a Grid and set HorizontalAlignment as Left and Center for Image and TextBlock respectively
<Grid VerticalAlignment="Top">
<Image HorizontalAlignment="Left"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
You can try the following code :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image x:Name="icon_goback2" Source="Assets/icon_home.png" Margin="10,0,0,0" Height="50" Width="50"/>
<TextBlock Grid.Column="1" Text="Your Page" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="70"/>
</Grid>
What this code will do is divide your grid into 3 Columns and place the <Image> in the 1st Column (Grid.Column="0") and <TextBlock> in the 2nd Column (Grid.Column="1"). You can additionally change the alignment of Image and Texblock if you need to.
Also, it is good to note that StackPanel will always override the Horizontal alignment of the Child elements when you are setting its orientation as horizontal. This is the reason why using a grid and dividing it into multiple rows and columns is better in scenarios like this.
Edit :
Since you have quite a large textblock you can change the column definitions to something like this :
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
This will divide your grid into 2 parts with the column widths set automatically.
Hope this helps.
I've posted a similar question in the past but never quite resolved it and so here I am again.
In my layout grid, I have an image which takes the full area but I also display another grid which is vertically aligned to the bottom, has its background color set and its opacity set to .5.
This part works fine.
Now, I want to display another grid within that grid which will contain another image (a logo) and a TextBlock which contains a description.
My problem is that both the image and textblock are being dimmed. While I have no problem with the logo being dimmed, I do want to keep my description fully opaque but can't seem to be able to do this.
Is there a way to achieve this? Note I'm trying to build a custom tile for WP8.
Here is the code:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Stretch="UniformToFill" Source="/Assets/0.jpeg" ></Image>
<Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
<TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
</Grid>
</Grid>
Thanks.
As you found out, everything that is a child of that grid is going to have a 0.5 opacity, and any opacity settings on the children are going to be relative to that.
Could you just overlay a third grid on top of the second that has the same sizing and contains your image and text? I don't have anything in front of me to test this at the moment, but something like:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image Stretch="UniformToFill" Source="/Assets/0.jpeg" ></Image>
<Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
</Grid>
<Grid Visibility="Visible" Height="100" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
<TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
</Grid>
</Grid>
I started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!
Here's my markup:
<GridView.ItemTemplate>
<DataTemplate>
<!-- ******************* here is my margins ******************* -->
<Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
<Grid HorizontalAlignment="Left" Width="390" Height="190">
<Grid.Background>
<ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
</Grid.Background>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
<StackPanel MaxWidth="270">
<TextBlock Text="{Binding Summary}"/>
<TextBlock Text="{Binding Brand}" />
<TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.
You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;
<blah.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>
Hope this helps.
In XAML, I want the button to go on the BOTTOM of the red rectangle.
I clearly say:
"HorizontalAlignment="Right"
VerticalAlignment="Bottom"
It goes to the right but stays on the top. Why is that?
alt text http://tanguay.info/web/external/buttonTop.png
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MultiplePages.Page"
Width="300" Height="150">
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="300" Height="150" Orientation="Vertical">
<StackPanel Width="300" Height="100" Background="Blue">
<TextBlock x:Name="theTextBlock" Text="This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. "
TextWrapping="Wrap" Height="100" Width="300" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Width="300" Height="50" Background="Red">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</UserControl>
The StackPanel is meant to take it's sizing from it's elements and it's container (depending on it's orientation), although what you've done looks correct, that's not the way the StackPanel is "meant" to be used. Although it looks like it's the height it's set, it's actual height (that it uses for laying out child controls) is the size of it's content (the button). The StackPanel has it's uses, but if you are doing anything other than a simple stack of controls then you generally should be using something else.
You can fix it by either sticking a sized grid inside:
<StackPanel Width="300" Height="50" Background="Red">
<Grid Height="50">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right" VerticalAlignment="Bottom"
/>
</Grid>
</StackPanel>
Or, for that particular layout, you might want to look at DockPanel, which will behave more like you would expect it to.