I have implemented a user control which contains a grid inside a ScrollViewer. There is no functional code behind. If the XAML (see below) is used in an application (so between <Window></Window>) it works as expected. The vertical scroll bar appears if the row heights are made large enough and the lower rows can be scrolled up. However if exactly the same XAML is used as part of a user control (so between <UserControl></UserControl>) it works in the same way except the scroll bar is disabled. The ScrollViewer, when examined shows that IsEnabled is true. Any idea why this control cannot be selected?
<Canvas Name="MyCanvas">
<Canvas Name="GridHeaderCanvas"
Background="Black"
Width="345"
Height="480"
Canvas.Top="0">
<Label Content="Add" Background="BlanchedAlmond" HorizontalAlignment="Center" Width="35" Height="25" Canvas.Top="3" Canvas.Left="3"></Label>
<Label Content="Name" Background="PowderBlue" HorizontalContentAlignment="Center" Width="245" Height="25" Canvas.Top="3" Canvas.Left="41"></Label>
<Label Content="Val" Background="PowderBlue" HorizontalContentAlignment="Center" Width="35" Height="25" Canvas.Top="3" Canvas.Left="290"></Label>
<ScrollViewer x:Name="MyScrollViewer"
Canvas.Top="30"
Canvas.Left="3"
Height="440"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Grid x:Name="GridCanvas"
Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="245" />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Label Content="Val0" Background="PowderBlue" Grid.Column="0" Grid.Row="0"></Label>
<Label Content="Val0" Background="PowderBlue" Grid.Column="1" Grid.Row="0"></Label>
<Label Content="Val0" Background="PowderBlue" Grid.Column="2" Grid.Row="0"></Label>
<Label Content="Val1" Background="Pink" Grid.Column="0" Grid.Row="1"></Label>
<Label Content="Val1" Background="Pink" Grid.Column="1" Grid.Row="1"></Label>
<Label Content="Val1" Background="Pink" Grid.Column="2" Grid.Row="1"></Label>
<Label Content="Val2" Background="Yellow" Grid.Column="0" Grid.Row="2"></Label>
<Label Content="Val2" Background="Yellow" Grid.Column="1" Grid.Row="2"></Label>
<Label Content="Val2" Background="Yellow" Grid.Column="2" Grid.Row="2"></Label>
<Label Content="Val3" Background="Pink" Grid.Column="0" Grid.Row="3"></Label>
<Label Content="Val3" Background="Pink" Grid.Column="1" Grid.Row="3"></Label>
<Label Content="Val3" Background="Pink" Grid.Column="2" Grid.Row="3"></Label>
</Grid>
</ScrollViewer>
</Canvas>
<Canvas Name="ComponentCanvas"
Width="300"
Height="480"
Background="LightSkyBlue"
Canvas.Top="0"
Canvas.Left="350">
<StackPanel
Name="ControlPanel"
Canvas.Top="10"
Canvas.Left="10">
</StackPanel>
</Canvas>
</Canvas>
It took a while but the answer is that the page that hosted this control was of type Canvas. This Canvas had no name, if a name was given the problem disappeared.
Related
I have a xamarin.forms app. A screen has many controls, and I use ScrollView to let the user ability to see all the controls. I have a button outside of the ScrollView, because I want it to be easily accessible without scrolling down the screen. But some of our customers have vision issues, so they enlarge the text size on their phones. Then the button disappears from the screen. I wonder what I can do to fix this... I guess I would agree with the scrolling only for those with the large text size, if there is no better solution.
Here is my code:
<ContentPage.Content>
<StackLayout>
<ScrollView>
<StackLayout Margin="30">
... Many controls are here
</StackLayout>
</ScrollView>
<StackLayout
x:Name="Validation"
HeightRequest="150"
IsVisible="{Binding ValidationResult.IsValid, Converter={converters:InverseBoolConverter}}">
<Label Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Text="{Binding Errors}" TextColor="Red" />
</StackLayout>
<Button
Text="Calculate"
Command="{Binding CalculateCommand}"
Style="{StaticResource ButtonStyle}"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
ADDED:
I did not mention that the content of the page is within a ControlTemplate:
<ControlTemplate x:Key="MainPageTemplate">
<Grid>
<Label Text="{Binding ErrorMessage}" TextColor="Red" />
<ContentPresenter Margin="10, 0, 10, 120" />
<StackLayout VerticalOptions="End" BackgroundColor="LightGray" Padding="20" >
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='© {0:yyyy} Company Name, Inc.'}" />
<Label Text="All trademarks shown are the intellectual properties of their respective owners." />
</StackLayout>
</Grid>
</ControlTemplate>
Agree with #Jason , StackLayout will not fit the size of its child Elements . So you could use Grid with three Rows
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="150" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" Orientation="Both">
<StackLayout Margin="30" BackgroundColor="LightBlue" HeightRequest="300">
</StackLayout>
</ScrollView>
<Grid HeightRequest = "150" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Grid.Row="1" Text="{Binding Errors}" TextColor="Red" />
</Grid>
<Button
Grid.Row="2"
Text="Calculate"
HorizontalOptions="CenterAndExpand" />
</Grid>
I have a situation where I need to "overlay" a grouped set of information, presented by way of a Card (inplemented as a ContentView) on top of a portion of the page header, which is defined in a Grid inside of a FlexLayout. The output should resemble something like the following where the header is the portion in red:
The code for the header is as follows:
<!-- Header -->
<FlexLayout
HeightRequest="108"
AlignItems="Center"
Direction="Column"
BackgroundColor="#D92732">
<Grid VerticalOptions="Center" Margin="0, 30, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="80*"></ColumnDefinition>
<ColumnDefinition Width="300*"></ColumnDefinition>
<ColumnDefinition Width="80*"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ImageButton Source="Bell.png" Grid.Column="1" BackgroundColor="Transparent"
WidthRequest="37"
HeightRequest="40"
Aspect="AspectFit">
</ImageButton>
<Label
Grid.Column="3"
Text="Payments"
TextColor="#F9F8FA"
FontSize="20"
HeightRequest="40"
HorizontalOptions="Center"
VerticalOptions="Center" VerticalTextAlignment="End">
</Label>
<ImageButton Source="Bell.png" Grid.Column="5" BackgroundColor="Transparent"
WidthRequest="37"
HeightRequest="40"
Aspect="AspectFit">
</ImageButton>
</Grid>
</FlexLayout>
The method I used to solve the problem of having a visual element overlay a portion of another visual element, in this case a Grid overlay a portion of another Grid, is to set the position of the overlay Grid to a specific row and column of the first Grid and then set the Bottom value of the overlay Grid's Margin to a negative number that represents the desired height of the overlay Grid, as seen in the following code and screenshot. Note that I enclosed the overlaid Grid in a Frame which is where I set the negative Bottom Margin value.
<Frame Grid.Row="2" Grid.ColumnSpan="3" Grid.Column="0"
Margin="16,30,16,-310" WidthRequest="343" HeightRequest="300">
<StackLayout HeightRequest="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="44*" />
<RowDefinition Height="38*" />
<RowDefinition Height="40*" />
<RowDefinition Height="20*" />
<RowDefinition Height="96*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
FontFamily="{StaticResource HNMedium}"
FontSize="{StaticResource Font20}"
HorizontalOptions="Start"
Text="Verify Account"
TextColor="{StaticResource NGIC_DarkGray}"
VerticalOptions="Start" />
<Label Grid.Row="1"
Text="Enter the verification code sent to ******8998"
FontSize="{StaticResource Font16}"
TextColor="{StaticResource NGIC_DarkGrayishBlue}"
FontFamily="{StaticResource HNRegular}"/>
<Entry Grid.Row="2" TextColor="Black" />
<Label Grid.Row="3"
Text="Send a new code"
TextColor="{StaticResource NGIC_Red}"
FontSize="{StaticResource Font14}"
FontFamily="{StaticResource HNMedium}"/>
<StackLayout Grid.Row="4" >
<Button Text="Next"
TextColor="{StaticResource White}"
BackgroundColor="{StaticResource NGIC_Red}"
CornerRadius="15"
WidthRequest="300"
HeightRequest="40"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontFamily="{StaticResource HNBold}"
FontSize="{StaticResource Font14}"/>
<Button Text="Cancel"
TextColor="{StaticResource NGIC_Red}"
BackgroundColor="{StaticResource White}"
CornerRadius="15"
WidthRequest="300"
HeightRequest="40"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontFamily="{StaticResource HNRegular}"
FontSize="{StaticResource Font14}"
BorderColor="{StaticResource NGIC_Red}"
BorderWidth="1"/>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
How can I make a two column grid where the column on the left occupies only the space needed leaving the other column as much space as possible
I tried this code:
<Grid VerticalOptions="Start" Margin="10,0,10,0">
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Exclude Hidden" /></Grid>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="Start"><Label Text="All cards except those tagged as hidden" /></Grid>
<Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Include Hidden" /></Grid>
<Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Start"><Label <Grid Grid.Row="2" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Favorites" /></Grid>
<Grid Grid.Row="2" Grid.Column="1" HorizontalOptions="Start"><Label Text="Only cards tagged as favorites" /></Grid>
<Grid Grid.Row="3" Grid.Column="0" HorizontalOptions="Start"><Label Text="· Hidden" /></Grid>
<Grid Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"><Label Text="Only those cards tagged as hidden" /></Grid>
</Grid>
But this divides the grid into 50:50 column 1 and column 2.
What I need is for column 1 to only occupy the space needed and column 2 to have all the rest.
Can someone advice how I can do this?
To do that, you need to use Grid.ColumnDefinitions. Here is a code sample for that:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
With this code you are defining the definition for columns inside the grid. First definition, for the first column is to use Auto width, than first column will take as much as it needs, and our second ColumnDefinition is for second column and it will take a rest (*) of it, or "ALL".
To use this with your existing XAML follow code bellow:
<Grid VerticalOptions="Start" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Exclude Hidden" />
</Grid>
<Grid Grid.Row="0" Grid.Column="1" HorizontalOptions="Start">
<Label Text="All cards except those tagged as hidden" />
</Grid>
<Grid Grid.Row="1" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Include Hidden" />
</Grid>
<Grid Grid.Row="1" Grid.Column="1" HorizontalOptions="Start">
<Label Text="All cards with those tagged as hidden" />
</Grid>
<Grid Grid.Row="2" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Favorites" />
</Grid>
<Grid Grid.Row="2" Grid.Column="1" HorizontalOptions="Start">
<Label Text="Only cards tagged as favorites" />
</Grid>
<Grid Grid.Row="3" Grid.Column="0" HorizontalOptions="Start">
<Label Text="· Hidden" />
</Grid>
<Grid Grid.Row="3" Grid.Column="1" HorizontalOptions="Start">
<Label Text="Only those cards tagged as hidden" />
</Grid>
</Grid>
... Also I am not sure why you are using those inner Grids to just hold your Labels, that is not the best practice IMO, but that is only my opinion.
And the final result of my code is like this:
Hope that this was helpful for you!
Quick note: First Column will have width of the longest row item.
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!
I have a TabControl which has four labels. Its xaml is:
![enter image description here][1]<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl Height="282" HorizontalAlignment="Left" Name="tabControl1"
VerticalAlignment="Top" Width="503">
<TabItem Header="tabItem1" Name="tabItem1">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="101*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="367"/>
<ColumnDefinition Width="125*" />
</Grid.ColumnDefinitions>
<Label Content="Library:" Height="28" HorizontalAlignment="Left" Margin="309,15,0,0" Name="label1" VerticalAlignment="Top" Width="49" />
<Label Content="Museum:" Height="28" HorizontalAlignment="Left" Margin="303,13,0,0" Name="label2" VerticalAlignment="Top" Width="58" Grid.Row="1" />
<Label Content="Cinema:" Height="28" HorizontalAlignment="Left" Margin="309,11,0,0" Name="label3" VerticalAlignment="Top" Width="50" Grid.Row="2" />
<Label Content="Embankment:" Height="28" HorizontalAlignment="Left" Margin="281,30,0,0" Name="label4" VerticalAlignment="Top" Width="81" Grid.Row="3" />
</Grid>
</TabItem>
</TabControl>
</Grid>
When a program is run then some letters, signs are disappeared and I cannot understand the reason why. For example, in this screen shot it can be seen that colon of word “Cinema” is not drawn.
I made a grid, however, it does not help. What should I do to make my program work? It happens very often. I want all my labels to show correctly.
It can be seen that a colon of a word “Cinema” is not drawn.
try removing the "Width" of the labels and allow the content to size the control
<Grid>
<TabControl Height="282" HorizontalAlignment="Left" Name="tabControl1"
VerticalAlignment="Top" Width="503">
<TabItem Header="tabItem1" Name="tabItem1">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="101*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="367"/>
<ColumnDefinition Width="125*" />
</Grid.ColumnDefinitions>
<Label Content="Library:" Height="28" HorizontalAlignment="Left" Margin="309,15,0,0" Name="label1" VerticalAlignment="Top" />
<Label Content="Museum:" Height="28" HorizontalAlignment="Left" Margin="303,13,0,0" Name="label2" VerticalAlignment="Top" Grid.Row="1" />
<Label Content="Cinema:" Height="28" HorizontalAlignment="Left" Margin="309,11,0,0" Name="label3" VerticalAlignment="Top" Grid.Row="2" />
<Label Content="Embankment:" Height="28" HorizontalAlignment="Left" Margin="281,30,0,0" Name="label4" VerticalAlignment="Top" Grid.Row="3" />
</Grid>
</TabItem>
</TabControl>
</Grid>