I need to make a re-usable user control like below design. It has a gridview inside with dynamic content and multiple selection option.
Since there isn't such control to use to accomplish something like this, i don't have any idea about how to make this a reality. I am really confused between using ExpanderView or DataTemplateSelector. What do you suggest me to use for making this or anything you used before for same kind of functionality?
Look at this expander control sample.
https://expanderview.codeplex.com/SourceControl/latest
you can modify the template of that control as you want. since you need a Gridview with multiple selection I had implemented it.
<ExpaControl:ExpanderControl HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="300"
IsExpanded="True"
Header="Expandable View Header!!!"
Expanded="ExpanderControl_Expanded"
NonExpandableHeader="This is the non-expandable header">
<GridView SelectionMode="Multiple" HorizontalAlignment="Left">
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
<GridViewItem Margin="5">
<Rectangle Height="30" Width="30"
Fill="Gray"/>
</GridViewItem>
</GridView>
</ExpaControl:ExpanderControl>
Related
I have a button with a flyout and for some reason I can't remove the border, white, around the black grid. Any suggestions?
Picture of output
Xaml Implementation
<Button Foreground="Transparent" HorizontalAlignment="Right" Width="30" Height="30" Margin="0,0,15,5">
<Button.Background>
<ImageBrush ImageSource="ms-appx:///Assets/ButtonImage.png" />
</Button.Background>
<Button.Flyout>
<Flyout Placement="Top" >
<Grid Width="300" Height="auto" Margin="0,0,0,0" Background="Black" BorderThickness="3" BorderBrush="blue" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Height="50" Grid.Row="0" Background="Black" BorderBrush="Black">
<TextBlock x:Name="SSMenuAppVersionText" Text="123" FontSize="15" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid x:Name="AppSuggestionGrid" Grid.Row="1" Background="Black" BorderBrush="Black">
<Button x:Name="AppSuggestionButton" Click="FeedBackButtonClicked" Background="Transparent" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuAppSuggesstionText" Text="App Suggestions" Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
<Grid Grid.Row="2" BorderBrush="Black" Background="Black">
<Button x:Name="ReferButton" Click="ReferButtonClicked" Background="Black" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuReferText" Text="Refer " Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
<Grid Grid.Row="3" BorderBrush="Black" Background="Black">
<Button x:Name="VisitButton" Click="VisitButtonClicked" Background="Black" Height="50" HorizontalAlignment="Stretch">
<TextBlock x:Name="SSMenuVisitText" Text="Visit " Foreground="#007AFF" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Button>
</Grid>
</Grid>
</Flyout>
</Button.Flyout>
</Button>
You have options. If we go look at the guts of the Flyout Style Template we notice some set theme resources for Padding and Border which you can use to either override the properties, or just create your own Style template for Flyout and make them whatever you like.
So for example if you went and tossed something like this into your resource dictionary, you should override the ThemeResource for the app.
<Thickness x:Key="FlyoutContentThemePadding">0,0,0,0</Thickness>
<Thickness x:Key="FlyoutBorderThemeThickness">0</Thickness>
Hope this helps, cheers!
If you paste this code in the mainpage of a new UWP app (or look at the 1st picture) you can see that the orange grid is taking more space than needed (VerticalAlignment is set to top). To make it work like it should, you have to set the 2nd row's height of this grid to Auto (see 2nd picture). The problem is that I want to give the extra space to the 2nd/last row and not to distribute it across all rows.
Putting the controls in the left column inside their own grid works (obviously, because there is no rowspan) but I can't do that because when the screen narrows the stackpanel in the right column goes inside a row in the left column.
The second problem is that if you click on the orange/green/yellow space, focus goes always to the textbox in the first row (yellow).
UPDATE: both problems are fixed without the scrollviewer but I clearly need it.
<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer Background="DarkGreen" VerticalScrollBarVisibility="Auto">
<Grid Background="DarkOrange" Margin="10" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="Yellow">
<TextBlock Text="Title" />
<TextBox Margin="20" />
</StackPanel>
<Grid Grid.Row="1" Background="DeepPink" VerticalAlignment="Top">
<ListView Margin="10" VerticalAlignment="Top">
<ListView.Items>
<TextBlock Text="Item1" />
</ListView.Items>
</ListView>
</Grid>
<StackPanel Grid.Column="1" Grid.RowSpan="2" Background="Blue" VerticalAlignment="Top">
<StackPanel>
<TextBlock Text="Title1" />
<GridView Margin="0,10,0,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
</GridView.Items>
</GridView>
</StackPanel>
<StackPanel>
<TextBlock Text="Title2" />
<GridView Margin="0,10,0,0">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.Items>
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
<Rectangle Width="80" Height="80" Fill="White" />
</GridView.Items>
</GridView>
</StackPanel>
</StackPanel>
</Grid>
</ScrollViewer>
</Grid>
I found a workaround. Since the first row is not going to expand or change, I set the first row's MaxHeight property equal to the actual height of the row at runtime.
For the second problem set the IsTabStop property of the scrollviewer to True as explained here:
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/32e026dd-8338-4c19-a7d6-1bb8797044b3/first-input-control-in-the-scroll-viewer-is-always-getting-focused?prof=required
I am trying to set a caption (something like the caption of a html table control) for my grid control but I am not seeing any property related to that. Am I missing something ?
Currently I am thinking to set the grid caption using another TextBlock control having the same alignment with the grid... but this seems to get complicated for such a simple thing.
Do you know, is there another way to set the caption of a grid in a universal windows project ?
Add another row to your grid. Then add a TextBlock to the last row for the caption. Set the Grid ColumnSpan property, for the TextBlock, to span all of the columns in your grid.
Here is an example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="White" />
<Rectangle Grid.Row="0" Grid.Column="1" Fill="Black" />
<Rectangle Grid.Row="0" Grid.Column="2" Fill="White" />
<Rectangle Grid.Row="0" Grid.Column="3" Fill="Black" />
<Rectangle Grid.Row="1" Grid.Column="0" Fill="Black" />
<Rectangle Grid.Row="1" Grid.Column="1" Fill="White" />
<Rectangle Grid.Row="1" Grid.Column="2" Fill="Black" />
<Rectangle Grid.Row="1" Grid.Column="3" Fill="White" />
<Rectangle Grid.Row="2" Grid.Column="0" Fill="White" />
<Rectangle Grid.Row="2" Grid.Column="1" Fill="Black" />
<Rectangle Grid.Row="2" Grid.Column="2" Fill="White" />
<Rectangle Grid.Row="2" Grid.Column="3" Fill="Black" />
<Rectangle Grid.Row="3" Grid.Column="0" Fill="Black" />
<Rectangle Grid.Row="3" Grid.Column="1" Fill="White" />
<Rectangle Grid.Row="3" Grid.Column="2" Fill="Black" />
<Rectangle Grid.Row="3" Grid.Column="3" Fill="White" />
<TextBlock Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="4"
Text="This is a Caption"
HorizontalAlignment="Center" VerticalAlignment="Center"
Foreground="Black" FontSize="10"/>
</Grid>
Currently I am thinking to set the grid caption using another TextBlock control having the same alignment with the grid... but this seems to get complicated for such a simple thing.
This is an acceptable solution, Mike Jablonski has provided a sample. If you need to ensure reusability, you can create a UserControl which using TextBlock control to show Caption, registering a dependency property is a good way to set "Caption" for this UserControl, see Dependency properties overview
I have collection of data items that should be represented on a page in a row.
<ItemsControl ItemsSource="{x:Bind ViewModel.PresetsSecondLine, Mode=OneWay}"
Visibility="{x:Bind ViewModel.IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Margin="0 5">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
HorizontalChildrenAlignment="Stretch"
MaximumRowsOrColumns="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="entities:Preset">
<controls:PresetButtonControl Preset="{x:Bind}"
VerticalAlignment="Stretch"
Width="290"
Margin="5"
Style="{StaticResource DashboardButtonStyle}"
HorizontalAlignment="Stretch" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
The collection might contain from zero to 4 items displayed in a row. If there are 4 items, they should fill whole row. When there are less than 4 items they should be displayed proportionally:
I found the solution of such issue with UniformGrid, unfortunately UniformGrid is not longer supported in UWP.
1) The first easy solution is to use ViewBox which is much like UniformGrid. You can use as below:
<Viewbox Stretch="Uniform" MaxHeight="60" MaxWidth="200">
<StackPanel Orientation="Horizontal">
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
</StackPanel>
</Viewbox>
2) Or you can choose VariableSizedWrapGrid, which is a layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns. You can find detail info on MSDN. Below is a simple example.
<VariableSizedWrapGrid Orientation="Horizontal" MaxWidth="150" >
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
<Rectangle Fill="Red" Margin="5" Height="50" Width="50"/>
</VariableSizedWrapGrid >
Actually there are still more other ways for adaptive UI. But the above two seem more straight forward and easy.
Let me know if anything unclear.
I'm making an app for Windows Phone 8.1 and I've run into some troubles with how the elements are displayed on the screen in different resolutions.
My question is: How can I display two columns with X number of rows, where the width of the columns will stretch to the side of the screen, no matter the screen size (for phones).
[1] Just to give you a visual example, this is how I want it to look, no matter the screen size (picture number [1]): (There are more rows below, but I removed them for this example).
http://imgur.com/a/DTYsg
[2] However, on bigger screens (this case a 6-inch), the content does not stretch all the way out, as shown in picture number [2].
[3] I've tried adding a Viewbox around the content, but then the result is like picture number [3] in the imgur link (couldn't upload more than one link). It stretches out, but it doesn't give me two columns. I've tried setting a max width for the Viewbox as well, but it doesn't change anything.
My XAML code so far is:
<ScrollViewer>
<Grid>
<GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
<GridView.Header>
<TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
</GridView.Header>
<!-- Row 1 -->
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
<TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
<TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<!-- Row 2 -->
<GridViewItem Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
<TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
<TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
</GridView>
</Grid>
</ScrollViewer>
Thank you!
You can change the size of one from the GridViewItems in code behind
e.x.
public MainPage()
{
//....
var bounds = Window.Current.Bounds;
double height = bounds.Height;
double width = bounds.Width;
gridViewitem1.Width = width * 0.5f;
ContentGrid.Width = width;
}
I've tested it on all sizes.
EDIT:
You must change the width of the ContentGrid, too.
And remove the grid, wich is in the Scrollviewer
<ScrollViewer>
<GridView x:Name="ContentGrid" Margin="0,5,0,5" HorizontalAlignment="Center">
<GridView.Header>
<TextBlock TextWrapping="Wrap" Margin="0,5,0,5" HorizontalAlignment="Center" Text="Application name" Style="{StaticResource HeaderStyle}" />
</GridView.Header>
<!-- Row 1 -->
<GridViewItem x:Name="gridViewItem1" Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Angle.png" Margin="0,-9,5,9" />
<TextBlock Text="Angle" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_1" Style="{StaticResource GridStyleOdd}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Area.png" Margin="0,-9,5,9" />
<TextBlock Text="Area" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
<!-- Row 2 -->
<GridViewItem Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Fuel_Consumption.png" Margin="0,-9,5,9" />
<TextBlock Text="Consumption" Style="{StaticResource TextBlockStyle}" Margin="10,0,0,-23" Width="188" />
</Grid>
</GridViewItem>
<GridViewItem Tapped="GridViewItem_Tapped_2" Style="{StaticResource GridStyleEven}">
<Grid>
<Image Height="70" Width="70" HorizontalAlignment="Center" VerticalAlignment="Center" Source="Assets/Icons/Currency.png" Margin="0,-9,5,9" />
<TextBlock Text="Currency" Style="{StaticResource TextBlockStyle}" />
</Grid>
</GridViewItem>
</GridView>