I know that We can use a view box to simulate a line in xaml
<BoxView
VerticalOptions="Fill"
HorizontalOptions="Center"
WidthRequest="1"
Color="Black"/>
That would create a vertical line, however I want to create something like:
I wonder if a grid would be enough to create something like that
How to use a viewbox to draw the vertical line from bottom to top until middle, and then use other view box to middle to right
I was thinking on using a stacklayout instead of a grid and then use
StackOrientation.Vertical and LayoutOptions.Center but I don´t know exactly how to proceed.
What would be the best or easiest way to do it?
I have created something similar that you are looking for:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Grid.RowSpan="2" BorderBrush="Black" BorderThickness="4">
</Border>
<Border Grid.Column="2" Grid.Row="2" BorderBrush="Black" BorderThickness="4">
</Border>
</Grid>
PS: Just make sure that the controls inside the first border do not cross the first column of the second row inside the grid as the second border is overlapping the first one.
Related
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 am new to Windows Phone development. I created a grid and added a button to one of the columns, the button does not fill the entire grid column. I am not even able to drag and resize the button control.
This is the code. The button appears at the center of column 0 and is cropped since it tries to fill into column2 as well. The same code seems to work fine in a 8.0 project I downloaded. Can anyone tell me how I can make the button fill the entire column and not spill into the second grid.
Updated code
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="0">Text</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="1">Text</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="2">Text</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="0" Grid.Column="3">Text</Button>
</Grid>
Try adding this to your Button.
HorizontalAlignment="Stretch"
In WP8.1, its default value is Left.
Update
The cut-off issue is because there's a default MinWidth (109) set to the default Button style.
Try removing it by doing this.
MinWidth="0"
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 ListViewdefined in a Grid like this:
<Border BorderThickness="1" Grid.Row="1" VerticalAlignment="Top" Margin="0,0,0,50" BorderBrush="Gray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ListView
Grid.Row="1"
ItemsSource="{Binding MyItems}"
Padding="40,40,40,40"/>
</Grid>
My problem is that I want the last item of the listview to be 40 pixel away from listView's bottom, but my code is not working, the top padding is ok, but bottom has no effect. That is like adding a blank item on the beginning and the end of the listview but that would be a stupid thing to do.
You can put the ListView inside of another Scrollviewer and pad the ListView itself.
How can I design the Border only Top, Left, Right or Bottom Side in XAMl?
In CSS is this possible with Border-Top:...
The border thicknes is a composite property of the left, top, right and bottom thicknesses (notice the difference in order from CSS). If you specify only one value you set all of them, but you can specify them separately:
BorderThickness="1,2,3,4"
In XAML you don't have border property on elements like you have in CSS. However, you can use a <Border> element and set individual thicknesses just as you can i CSS (sets left-right and top-bottom border thickness):
<Border BorderBrush="Blue" BorderThickness="2,4">
<TextBlock Text="Inside border"/>
</Border>
or (sets left, top, right, bottom thickness):
<Border BorderBrush="Blue" BorderThickness="1,2,3,4">
<TextBlock Text="Inside border"/>
</Border>
If you need more control of the border you can use a panel for layout. E.g. using a <Grid>:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Blue" BorderThickness="2"/>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" BorderBrush="Green" BorderThickness="4"/>
<Border Grid.Row="1" Grid.Column="0" BorderBrush="Red" BorderThickness="3"/>
<Border Grid.Row="1" Grid.Column="2" BorderBrush="Red" BorderThickness="3"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Inside border"/>
</Grid>
You are free to put other visual elements in the grid cells.