I have some DataTemplate for Windows GridView in corresponding platform. In this template there should be picture with some text. This text should have background, but only for readibility purposes. I want to have this background to be transparent so image could be seen through it. However, when I set background in format #4C000000, nothing happens and it stays solid black.
<DataTemplate x:Key="GridViewPlayerDataTemplate">
<Grid Height="100" Width="100" >
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Image x:Name="ImageRoleImage" Stretch="UniformToFill" Source="{Binding Guess.PlayerRole.ImageSource , Mode=OneWay, Converter={StaticResource ImageConverterHou}}" />
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Opacity="0.1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerName" Opacity="1" TextWrapping="Wrap" Text="{Binding Actor.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<Grid Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="1" Grid.RowSpan="1" Background="#4C000000">
<TextBlock x:Name="TextBlockPlayerGuessedRole" TextWrapping="Wrap" Text="{Binding Guess.PlayerRole.Name}" TextAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</Grid>
</DataTemplate>
I tried to create this pure Windows Store application and transparency works just fine.
Can anyone tell me something about this strange behaviour and/or how to fix it?
Related
I have a simple layout that basically displays a list of items in ListView using an ItemsWrapGrid as the panel template. The problem I am having is that the first image in the ListView is always bigger than the rest, even with a fixed width / height set. I am completely stumped.
An image of the problem:
The ListView XAML is:
<ListView ItemsSource="{Binding Currencies}" ItemTemplate="{StaticResource PortfolioCurrencyTemplate}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" Width="Auto" Height="Auto"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
The data template:
<Page.Resources>
<DataTemplate x:Key="PortfolioCurrencyTemplate" x:DataType="viewModels:PortfolioViewModel">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="2"
Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="1" MaxWidth="100" MaxHeight="100" Source="https://www.cryptocompare.com/media/19633/btc.png"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding Symbol}" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding LastPrice}" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</Page.Resources>
Instead of using ListView and changing ItemsPanelTemplate to create a GridView Effect and tackle issues one by one, I would suggest you switch to AdaptiveGridView.
You can install Nuget Package for UWP Community Toolkit from Here
Add below namespace to your page
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
Now your ListView needs to be replaced like below.
<controls:AdaptiveGridView ItemsSource="{Binding Currencies}"
ItemTemplate="{StaticResource PortfolioCurrencyTemplate}"
DesiredWidth="250"/>
Output from Designer
Good Luck.
Why does my UWP (Universal Windows Platform) App force extra space at the top and bottom of my app even though there is nothing there?
Here's what it looks like:
Even though in Visual Studio 2013 (design mode) you can see that the blue bounding box displays the bottom of the page as follows:
The outer grey is the device it would be running on.
The XAML looks like the following:
<Page
x:Class="CYaPass.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CYaPass"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="515" Width="570" Background="LightGray" Loaded="Page_Loaded">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="320"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0">
<TextBlock FontSize="16" HorizontalAlignment="Center">1. Select a Site/Key</TextBlock>
<ListView BorderThickness="2" BorderBrush="Aquamarine"
x:Name="SiteListBox" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="251"
Margin="10,10,0,0" Width="Auto" SelectionChanged="SiteListBox_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="5,0,0,0" />
</Style>
</ListView.ItemContainerStyle>
<ListViewItem Content="Item 2"/>
</ListView>
<StackPanel Margin="10,0,0,0" Orientation="Horizontal" Grid.Column="0">
<Button x:Name="DeleteSiteButton" Content="Delete Site"
HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top" Click="DeleteSiteButton_Click"/>
<Button x:Name="AddSiteButton" Content="Add Site" HorizontalAlignment="Right"
Margin="10,0,0,0" VerticalAlignment="Top" Click="AddSiteButton_Click"/>
</StackPanel>
</StackPanel>
<TextBox x:Name="passwordTextBox" HorizontalAlignment="Left" Margin="7,150,0,0" Grid.Row="1" Grid.ColumnSpan="2"
TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="560"/>
<StackPanel HorizontalAlignment="Left" Height="128" Margin="10,0,0,0" Grid.Column="0" Grid.Row="1"
VerticalAlignment="Top" Width="285">
<Grid Margin="0,0,-11,0">
<Grid.RowDefinitions>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
<RowDefinition Height="40" ></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<CheckBox x:Name="addUppercaseCheckbox" Grid.Row="0" Grid.Column="0" Content="Add Uppercase" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="254" Click="addUppercaseCheckbox_Click" Margin="7,0,3,0"/>
<CheckBox x:Name="addSpecialCharscheckBox" Grid.Row="1" Grid.Column="0" Content="Add Special Chars" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<TextBox x:Name="specialCharsTextBox" Grid.Column="1" Grid.Row="1" Margin="7,0,3,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.RowSpan="1" TextWrapping="NoWrap" Text="#"/>
<CheckBox x:Name="setMaxLengthCheckBox" Grid.Row="2" Grid.Column="0" Content="Set Max Length" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
<local:NumericUpDown Grid.Column="1" HorizontalAlignment="Left" Margin="7,0,3,0" Grid.Row="2" VerticalAlignment="Center" Width="64"/>
</Grid>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0">
<TextBlock Grid.Column="1" Grid.Row="0" FontSize="16" HorizontalAlignment="Center">2. Draw a pattern</TextBlock>
<Canvas HorizontalAlignment="Center" x:Name="MainCanvas"
Height="252" Width="252" Margin="7,10,0,0" VerticalAlignment="Top" Background="AliceBlue" Tapped="MainCanvas_Tapped" PointerMoved="MainCanvas_PointerMoved"/>
<Button x:Name="ClearGridButton" Content="Clear"
Margin="50,0,10,0" VerticalAlignment="Center" Click="ClearGridButton_Click" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</Page>
You can see the page's width is wider than the height, but when the app runs on a desktop or a simulator device (like 7" pad) the extra space is pushed into the top and the bottom.
UWP Forced Minimum?
Is this due to some minimum size or something that UWP forces on apps?
Cannot Resize Smaller When Running
Even if I grab the form's bottom or top bounding frame when the app is running, I cannot make it any smaller.
The Default Content-Alignment is set to Center because you set the Height and Width of your Page, so your page is placed in the Center and isn't filling the whole Screen.
One Possible Solution is to add to the Page xaml Attributes this Piece of Code:
VerticalAlignment="Top".
To set the HorizontalAlignment to the left add this:
HorizontalAlignment="Left".
One more advise: When you don't Need to Display more than one xaml Page at the Screen leave the Page Height and Width to Default.
I have this following code on windows store app project.
<Grid x:Name="minutesGrid" Height="1000" Width="1024" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="750"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Background="White" Height="50" Orientation="Vertical" >
<TextBlock x:Name="minutesTitle" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" TextAlignment="Center" Foreground="{StaticResource BrandBrush}" Margin="0,15,0,0"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock x:Name="minutesDesc" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" Foreground="{StaticResource BrandBrush}" Margin="15,15,0,0" TextWrapping="WrapWholeWords"></TextBlock>
</ScrollViewer>
</StackPanel>
<StackPanel Grid.Row="3" Background="White">
<PdfViewer:SfPdfViewerControl x:Name="minutesPDF" Canvas.ZIndex="1"/>
</StackPanel>
</Grid>
And when i load the pdf it doesnt show the scrollbars or lets me do a scroll either with mousewheel or on tablet with fingers.
This is how i load my file, that is displayed correctly.
var datapdf = await objService.DownloadFileService("teste.pdf",minutes.gappFile._id);
PdfLoadedDocument pdf = new PdfLoadedDocument(Convert.FromBase64String(datapdf));
await minutesPDF.LoadDocumentAsync(pdf);
minutesPDF.ViewMode = Syncfusion.Windows.PdfViewer.PageViewMode.Normal;
Do i need to add something else?
I think that you've to remove the StackPanel and assign the Grid.Row to the PDFViewer ..
SF Ref :
http://help.syncfusion.com/winrt/pdfviewer/getting-started
Since StackPanel has a default behavior to grow in one direction, scroll of the control included in the StackPanel will not be initiated without the height property being set to it.
Please find the following link which illustrates the reason “Why the control cannot be scrolled inside StackPanel without setting its height property?”
How can I get ScrollViewer to work inside a StackPanel?
Code Snippet: XAML
<Grid x:Name="minutesGrid" Height="1000" Width="1024" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="50"/>
<RowDefinition Height="100"/>
<RowDefinition Height="750"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="1" Background="White" Height="50" Orientation="Vertical" >
<TextBlock x:Name="minutesTitle" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" TextAlignment="Center" Foreground="{StaticResource BrandBrush}" Margin="0,15,0,0"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="2" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible" Height="100">
<TextBlock x:Name="minutesDesc" Text="" FontFamily="Segoe UI Semilight" FontWeight="SemiLight" FontSize="24" Foreground="{StaticResource BrandBrush}" TextWrapping="WrapWholeWords"/>
</ScrollViewer>
</StackPanel>
<StackPanel Grid.Row="3" Background="White">
<PdfViewer:SfPdfViewerControl x:Name="minutesPDF" Height="750" Canvas.ZIndex="1"></PdfViewer:SfPdfViewerControl>
</StackPanel>
</Grid>
I'm working on an app for windows 10. I've previously worked on a handful of Windows 7 applications and I'm trying to get use to the many differences now. I'm trying my luck at a universal app, and I'm wanting to centre a handful of controls so that no matter the screen/windows size the login details are centred.
I've been searching for help with this for a while, but I've found a lot of this to be in its' infancy; in other words there's not a lot of places I'm finding relevant information, never mind helpful. I was hoping someone on here could point me in the right direction?
Here's the window on the desktop view:
Here's what I'm meaning, the textboxes, labels ect don't move with the resize of the window, let alone different screen sizes.
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FlyoutBase.AttachedFlyout="{StaticResource FlyoutBase1}">
<CheckBox x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" Margin="1038,441,0,0" VerticalAlignment="Top" ClickMode="Press"/>
<TextBox x:Name="txtUserName" HorizontalAlignment="Left" Margin="818,441,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="202"/>
<PasswordBox x:Name="txtPassword" HorizontalAlignment="Left" Margin="818,478,0,0" VerticalAlignment="Top" Width="202"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="723,446,0,0" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Top"/>
<TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Margin="735,478,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top"/>
<Button x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" Margin="959,539,0,0" VerticalAlignment="Top" Width="61"/>
<Button x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Left" Margin="818,539,0,0" VerticalAlignment="Top" Width="116"/>
<ProgressRing x:Name="progressring1" HorizontalAlignment="Left" Margin="873,592,0,0" VerticalAlignment="Top" Height="87" Width="103"/>
<TextBlock x:Name="txtStatus" HorizontalAlignment="Left" Margin="818,510,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
<Grid HorizontalAlignment="Left" Height="180" Margin="692,412,0,0" VerticalAlignment="Top" Width="496"/>
</Grid>
Don't use Margins for positioning. Use margins only to enforce margins around the object.
To center an element in its parent set its HorizontalAlignment or VerticalAlignment to Center.
For more control, use layout controls such as Grid, StackPanel, and RelativePanel to position the controls where you want. For your layout you could set up 3 Rows and 3 Columns in your Grid to place the controls overall and then set the HorizontalAlignment to place the controls in the grid. Here's a quick update to your Xaml that will keep things centered so long as the window is wide enough for everything to fit (you can use adaptive techniques to reflow things for narrower views)
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="2" Grid.Row="1" Margin="10,0" x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" VerticalAlignment="Top" ClickMode="Press"/>
<TextBox Grid.Column="1" Grid.Row="1" x:Name="txtUserName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
<PasswordBox Grid.Column="1" Grid.Row="2" x:Name="txtPassword" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<TextBlock x:Name="textBlock" Margin="10,0" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Center"/>
<TextBlock x:Name="textBlock_Copy" Margin="10,0" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Center"/>
<Button Grid.Column="1" Grid.Row="3" x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Grid.Column="1" Grid.Row="3" x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Right" VerticalAlignment="Top" />
<ProgressRing x:Name="progressring1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="87" Width="103"/>
<TextBlock x:Name="txtStatus" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
<Grid HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="496"/>
</Grid>
See Quickstart: Defining layouts and Adding layout controls on MSDN.
The above is a the right approach. Using a Grid Layout with auto as the row height or column width is a good approach because they automatically will scale with you. Depending on the difficulty of your project you can also use Adaptive Triggers. Here is a really intro example to using Adaptive Triggers, http://jamesqquick.com/windows-10-adaptive-triggers-intro/ . This way you can, for instance, make text bigger depending on the screen size.
You're doing good by testing all of the different sizes. This is important! I usually just run as a Windows 10 app and resize it in all directions!
I have the following XAML code:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="#FFE8E8E8">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,0" >
<TextBlock x:Name="AppName" Text="Agent" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0" Foreground="Black" />
<TextBlock x:Name="PageName" Text="agent audit" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="100" Foreground="Black"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Background="White"/>
<ScrollViewer HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" VerticalAlignment="Top">
<TextBlock x:Name="auditText" HorizontalAlignment="Left" Margin="0,0,0,0" Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="Black" Padding="10"/>
</ScrollViewer>
</Grid>
When the page comes into view I assign the TextBlock with the contents of an API Call (audit log text), and this gets quite long.
However, currently it cuts off all text below the screen height. I have the TextBlock and ScrollView set to Auto layout height/width.
I can even see the top of the next line of text, when I scroll the rest doesn't appear. Quite hard to screenshot too as you only see the issue when scrolling, and whilst scrolling I can't take a screenshot :/
Any ideas where I'm going wrong?
I've read numerous posts on this site but nothing quite hit what I was after.
Thanks.
This ended up working for me:
<ScrollViewer Height="Auto" Grid.Row="1">
<TextBlock x:Name="auditText" Text="TextBlock"
VerticalAlignment="Top" Foreground="Black" Margin="0,10,0,0" Grid.Row="1" Padding="20" TextWrapping="Wrap">
</TextBlock>
</ScrollViewer>
Setting the ScrollViewer height to AUTO