I have this datatemplate for items in a Listview, its a bunch of rows, with 4 columns, and on first column im trying to add a text displayed in vertical. So far i have this, the text appears in vertical but for some reason it shows cutted in the ends.
<DataTemplate x:Key="ActionItemTemplate">
<Grid Height="150" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="470"/>
<ColumnDefinition Width="470"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Tomato">
<TextBlock Text="In Progress" RenderTransformOrigin="0.5,0.5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
<Grid Grid.Column="1" Background="Blue"></Grid>
<Grid Grid.Column="2" Background="Green"></Grid>
<Grid Grid.Column="3" Background="Yellow"></Grid>
</Grid>
</DataTemplate>
Do i need to add anything ?
I used blend to modify your code, here is the result
and here is the code :
<Grid Grid.Column="0" Background="Tomato">
<TextBlock Text="In Progress In Progress In Progress " RenderTransformOrigin="0.5,0.5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Height="19" Margin="-149.5,65.5,-155.5,65.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
you should try it
Related
I'm attempting to make a "information" page, but when I get to a finished product this happens:
Video of application
So as you can see the poster of the movie and the description is fine to start with, but when the user attempts to use a different size than default it doesn't resize so the the user can see the same information.
Code:
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill" />
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<StackPanel Margin="80">
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick" Style="{StaticResource MaterialDesignRaisedLightButton}">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Bind Movie.Title}" />
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<StackPanel>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10" />
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100">
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
</StackPanel>
<StackPanel
MinWidth="300"
MaxWidth="600"
Padding="20">
<TextBlock Style="{StaticResource PageTitleStyle}" Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<TextBlock
Style="{StaticResource BodyTextStyle}"
Text="{x:Bind Movie.Overview}"
TextWrapping="WrapWholeWords" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
So in short, how do I keep the design, but make is so when the window changes size the image & text resizes to stay inside the window and stay visible.
Controls going outside of window
The problem is that when set root panel as StackPanel , the size of children element will be fixed. And it will not change as the window size changes. For solve the this, you could try to use Grid to replace. Please refer the following xaml layout.
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="Assets/hello.jpg"
Stretch="UniformToFill"
/>
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<Grid Margin="80" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="Grid Test Page"
/>
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<Grid
Grid.Row="1"
Margin="0,20,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10"
Source="Assets/hello.jpg"
/>
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100"
>
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
<StackPanel
Grid.Column="1"
MinWidth="300"
MaxWidth="600"
Padding="20"
>
<TextBlock Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<TextBlock Text="Defines a flexible grid area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row/column assignments (set by using Grid.Row and Grid.Column attached properties) and other logic." TextWrapping="WrapWholeWords" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>
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'm having trouble with what seems to be a weird issue with a listview in xaml for Windows 8.1. I'm using the Hub sample template that comes with VS 2013 Preview on Windows 8.1. For whatever reason, the first entry in the listview does not show up. I'm binding the listview with the sample JSON data provided in the app. It doesn't make a difference whether I bind to the sample data or to my own data in a sqlite db file either. I'd post a picture, but I dont have enough reputation on stackoverflow just yet... The intent is to represent data in a table with columns. Everything in the xaml works except that it hides the first entry in the listview...
Here's the code.
<Grid x:Name="TransactionGrid" Grid.Column="1" Grid.Row="1"
Background="{ThemeResource AppBarItemBackgroundThemeBrush}"
DataContext="{Binding Group}"
d:DataContext="{Binding Groups[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid x:Name="TransactionHeader" Margin="0,0,0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="Date"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Center" Margin="0,0,0,5"/>
<TextBlock Grid.Column="1"
Text="Payee"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="2"
Text="Category"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="3"
Text="Description"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Left" Margin="0,0,0,5"/>
<TextBlock Grid.Column="4"
Text="Amount"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
<TextBlock Grid.Column="5"
Text="Balance"
Style="{StaticResource SubheaderTextBlockStyle}"
HorizontalAlignment="Right" Margin="0,0,0,5"/>
</Grid>
<ListView x:Name="TransactionListview"
Grid.Row="1"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
IsSynchronizedWithCurrentItem="False" IsItemClickEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="{Binding ElementName=TransactionListview, Path=ActualWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition Width="1.5*"/>
<ColumnDefinition Width="1.25*"/>
<ColumnDefinition Width="1.75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".75*"/>
<ColumnDefinition Width=".25*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"
Width="Auto"
Height="40"
Grid.ColumnSpan="7" />
<TextBlock Grid.Column="0"
Text="{Binding Title}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "1,0,0,0"
FontSize="17" />
<TextBlock Grid.Column="1"
Text="{Binding Subtitle}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="2"
Text="{Binding ImagePath}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="3"
Text="{Binding Description}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin = "0,0,20,0"
FontSize="17"/>
<TextBlock Grid.Column="4"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
<TextBlock Grid.Column="5"
Text="{Binding Title}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="17"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
This was cross-posted to MSDN forum where product team is answering:
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/8b9f3365-97d5-4405-a677-7b8638a32312/xaml-listview-in-win-81-not-showing-first-entry
I want to make a TextBlock shown vertically, just like the username in the Windows Phone built-in email app:
And my XAML code is:
<Grid x:Name="LayoutRoot">
<Grid.Background>
<ImageBrush ImageSource="{StaticResource Status_Background}" Stretch="UniformToFill"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6"/>
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" Width="70" Height="70" HorizontalAlignment="Center" Stretch="UniformToFill"/>
<TextBlock Text="userName" x:Name="userName" Grid.ColumnSpan="2" Margin="0"
FontSize="50" Foreground="{StaticResource Status_UserName}"
Width="Auto" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" CenterX="80" CenterY="70"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
<ScrollViewer Grid.Column="1" Height="Auto">
</ScrollViewer>
</Grid>
The result is:
The TextBlock didn't show up in the right place, how could I modify the XAML code? Thanks in advance.
Your problem is that render transforms are applied after layout, as described in this blog post. You need to bring your TextBlock out of the StackPanel and ensure that it is in the top left of the screen, then rotate it.
<Grid x:Name="LayoutRoot" >
<Grid.Background>
<ImageBrush ImageSource="{StaticResource Status_Background}" Stretch="UniformToFill"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="userName" x:Name="userName" FontSize="50" Foreground="{StaticResource Status_UserName}" Width="auto"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" CenterX="80" CenterY="70"/>
</TextBlock.RenderTransform>
</TextBlock>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6" />
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" Width="70" Height="70" HorizontalAlignment="Center" Stretch="UniformToFill"/>
</StackPanel>
<ScrollViewer Grid.Column="1" Height="auto">
</ScrollViewer>
</Grid>
I would approach it by using a translate and a rotate transform together. The rotate -90 to rotate to vertical and the translate to move it the correct place (i.e. anchor the new top left rather than the new bottom left)
Like this...
<Grid x:Name="LayoutRoot" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ProgressBar x:Name="progressBar" IsIndeterminate="True" Grid.ColumnSpan="2" VerticalAlignment="Top" Visibility="Collapsed" Margin="0,6" />
<StackPanel>
<Image x:Name="headerImage" Margin="0,12" HorizontalAlignment="Center" Stretch="UniformToFill"/>
<TextBlock Text="userName" x:Name="userName" Grid.ColumnSpan="2" Margin="0" FontSize="50" Foreground="{StaticResource Status_UserName}" Width="225.100006103516"
HorizontalAlignment="Left" VerticalAlignment="Bottom">
<TextBlock.RenderTransform>
<CompositeTransform CenterY="0" CenterX="0" Rotation="-90" TranslateY="{Binding Width, ElementName=userName}"/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>
</Grid>
I have a listbox template showing an image and three textboxes. You will see how are they distributed in the code below. My problem is that some items won't have an image and I want the text to fill the whole row in that case.
I've tried not to use a grid, to use a canvas, but I don't know why, when using a canvas inside a listbox, nothing is shown. I don't know if this is easy to accomplish. Here's the code:
<ListBox Grid.Column="0" Grid.Row="1" Background="White" HorizontalAlignment="Stretch" Name="itemList" VerticalContentAlignment="Stretch" SelectionChanged="listBoxSetmana_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="480">
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="17" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="3" Grid.Column="0" Grid.Row="0" BorderThickness="1" BorderBrush="#FFFF003F" Padding="1">
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="listImage" Width="36" Height="36" Source="{Binding thumbnail}" />
</Border>
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="0" Name="title" Foreground="Black" Text="{Binding title}" FontWeight="Bold" FontSize="20" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="1" Name="published" Foreground="Black" Text="{Binding published}" FontSize="13" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="2" Name="subtitle" Foreground="Black" Text="{Binding subtitle}" FontSize="16" TextWrapping="Wrap" />
<TextBlock Visibility="Collapsed" Text="{Binding id}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you!
There are several ways to bind this together.
One way is:
add some Padding to the Border
bind the Visibility of the Border to the thumbnail Property using an appropriate ValueConverter
change the width of Column 0 from "60" to "Auto" - then it will disappear when the image is Collapsed.