Displaying a small image inside a button or frame - c#

I need to display a small image inside a Frame or Button but the Image that im using its bigger than my Button/Frameand when I try to do it with Frame it wont display the Image only with the Button the problem being that the Image is way too big. How can I fix this.
Using Button:
<Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="1" Grid.Column="1">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.01*"/>
<RowDefinition Height="0.15*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.01*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Image="sobremesa.png" BackgroundColor="Black" Grid.Row="1" Grid.Column="1" x:Name="Ingredient"/>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="2.8*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<Image Source="https://i.imgur.com/066Iazn.png" Grid.Row="1" x:Name="CategoryImage"/>
<Label Text="Melão c/ Presunto" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="2"/>
<Label Text="6.90€" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
</Grid>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"/>
</Frame.GestureRecognizers>
</Frame>
Using Frame:
<Frame BackgroundColor="#40000000" BorderColor="#FFFFFF" CornerRadius="6" Padding="0" Grid.Row="1" Grid.Column="1">
<Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.01*"/>
<RowDefinition Height="0.15*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.01*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame Grid.Row="1" Grid.Column="1" BackgroundColor="Black" x:Name="Ingredient">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.1*" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<Image Source="sobremesa.png" Grid.Row="1" Grid.Column="1"/>
</Grid>
</Frame>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="2.8*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="0.2*"/>
</Grid.RowDefinitions>
<Image Source="https://i.imgur.com/066Iazn.png" Grid.Row="1" x:Name="CategoryImage"/>
<Label Text="Melão c/ Presunto" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="2"/>
<Label Text="6.90€" VerticalTextAlignment="Start" TextColor="White" HorizontalTextAlignment="Center" Grid.Row="3"/>
</Grid>
</Grid>
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"
NumberOfTapsRequired="1"/>
</Frame.GestureRecognizers>
</Frame>
The Image that im trying to display in the Frame is in the child Frame.
Remember that when I try to display with Frame it wont display the Image.

Related

call objects inside of the controls from the codebehind Xamarin forms

how come I can not call the object image and the object image backClickArrow nextClickArrow from codebehind? They can not because these are inside a control?
how can I call from codebehind, they need to start an event? thank you so much.
<control:CarouselView x:Name="carouselView">
<control:CarouselView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*"></RowDefinition>
<RowDefinition Height="0.2*"></RowDefinition>
<RowDefinition Height="59.8*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="backBlueArrow.png" x:Name="backClickArrow" Aspect="AspectFit" Grid.Column="0"></Image>
<StackLayout Margin="0,0,10,0" VerticalOptions="Center" HorizontalOptions="End" Grid.Column="1">
<Image HeightRequest="70" Source="clock.png" Aspect="AspectFit"></Image>
</StackLayout>
<Grid Grid.Row="0" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40*"></RowDefinition>
<RowDefinition Height="60*"></RowDefinition>
</Grid.RowDefinitions>
<Label Text="Superficie totale" TextColor="#fff" FontSize="Small" VerticalTextAlignment="End" HorizontalTextAlignment="Start" Grid.Row="0"/>
<Label Text="890000m2" FontSize="Large" TextColor="#fff" VerticalTextAlignment="Start" HorizontalTextAlignment="Start" Grid.Row="1"/>
</Grid>
<Image Source="nextBlueArrow.png" x:Name="nextClickArrow" Aspect="AspectFit" Grid.Column="3"></Image>
</Grid>
<!-- griglia fare la riga bianca -->
<Grid Padding="0" BackgroundColor="White" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
<Grid Padding="10" Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
</Grid>
</Grid>
<!--<Label Text="{Binding Testo}" />-->
</DataTemplate>
</control:CarouselView.ItemTemplate>
</control:CarouselView>
the object that i wish call:
<Image Source="backBlueArrow.png" x:Name="backClickArrow" Aspect="AspectFit" Grid.Column="0"></Image>
and
<Image Source="nextBlueArrow.png" x:Name="nextClickArrow" Aspect="AspectFit" Grid.Column="3"></Image>
i have solved like this:
<Button Image="nextBlueArrow.png" Clicked="clickme" Grid.Column="3"></Button>
use button and add Image attribute.

Custom xaml layout using RowDefinitions and ColumnDefinitions

I am new in UWP and I get some misunderstanding grid RowDefinitions and ColumnDefinitions as is mentioned in oficial doc. I have to make a custom list element, something like this:
but I can't handle it. In fact the main problem is how to set fill_parent property for a child view.
You can use this method like it's indicated in your mentioned docs. As is described in your img the last element it's in the middle vertically, so this layout will be:
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="24" />
<RowDefinition
Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="44" />
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="10" />
</Grid.ColumnDefinitions>
<Rectangle
Fill="Red"
Grid.RowSpan="2"
Grid.Column="0"/>
<Rectangle
Fill="Green"
Grid.Row="0"
Grid.Column="1" />
<Rectangle
Fill="Yellow"
Grid.Row="1"
Grid.Column="1" />
<Grid
Grid.RowSpan="2"
Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Rectangle
Fill="Gray"
Grid.Row="1"/>
</Grid>
</Grid>
For simplicity and clarity I was using Rectangle
Filling the space can be done with
width="*"
And the small complexity in your layout could be handled with nested grid system.
Here is the beginning, not the complete solution for your layout.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="44"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="44"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
</Grid>
</Grid>

In xaml/c# coding, text box buttons keep getting cut off?

I've done a google search already and many people have said to remove all the height/width/margin properties, but this doesn't seem to work for the text boxes where you enter the binary value and the decimal value. Right now everything will resize accordingly if you drag the window, but the buttons will still cut out sometimes.
<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.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Binary to Decimal Converter" FontSize="25" FontFamily="Times New Roman" FontWeight="Bold" TextAlignment="Center" Grid.ColumnSpan="3" Grid.Column="1" Grid.Row="1"/>
<TextBox x:Name="binaryValue" Grid.Column="3" Grid.Row="3" TextWrapping="Wrap" Text="" BorderThickness="1" FontSize="20" TextChanged="binaryValue_TextChanged" FontFamily="Times New Roman" Padding="0" Margin="0,0,0,10"/>
<TextBox x:Name="decimalValue" Grid.Column="1" Grid.Row="3" TextWrapping="Wrap" Text="" BorderThickness="1" FontSize="20" FontFamily="Times New Roman" TextChanged="decimalValue_TextChanged" Padding="0" Margin="0,0,0,10"/>
<TextBlock x:Name="textBlockBin" TextWrapping="Wrap" Text="Binary Value:" Grid.Column="1" Grid.Row="2" TextAlignment="Center" FontFamily="Times New Roman" FontSize="16" Margin="0,0,0,14"/>
<TextBlock x:Name="textBlockDec" TextWrapping="Wrap" Text="Decimal Value:" Grid.Column="3" Grid.Row="2" TextAlignment="Center" FontFamily="Times New Roman" FontSize="16" Margin="0,0,0,14"/>
<Button x:Name="buttonConvert" Content="Convert!" HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Column="2" Grid.Row="5"/>
</Grid>
</Page>
Your problem comes because you are using * (relative sizes) for your column heights and widths.
Because your text is a fixed size, it would be better to give the columns and rows a fixed size also in those cases. Then you can use * for the edges, so that it scales around the text.
Alternatively, you can use Auto.
For example:
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
You can then give the Page a minwidth and minheight to prevent it shrinking smaller than the content.

Avoid inheritance of opacity between nested Grids

I have a Grid with its background as black an opacity to 0.5 and in it is there another grid with opacity to 1 and background as White. But the inner grid still shows as its opacity was 0.5
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Background="Black" Opacity="0.5" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="1" Background="Black" Opacity="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>
<TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
<Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
</Grid>
</Grid>
I'm trying to emulate a win8 alert screen there is another way to do this? or How to prevent this inheritance? why this happen?
A little messy but this should work i think. Basically controls are stacked. So having the grid come after the first grid it shouldn't effect the opacity. May need to be tweaked, but something along the lines of this should work:
<Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.RowSpan="3" Background="Black" Opacity="0.5" />
<Grid Grid.Row="1" Background="Black" Opacity="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10*"/>
<RowDefinition Height="1.5*"/>
</Grid.RowDefinitions>
<Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>
<TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
<Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
</Grid>
</Grid>

How to add a control button for displaying data prev entered

I have a small screen program which displays patients at the top there is a search button where u can enter by name. I need this search display to be controlled by a button that is, it should not display any records (prev entered) unless click on this button, how would i set this up?
<Grid x:Name="LayoutRoot" Background="LightGray" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="First Name:" Margin="3"></TextBlock>
<TextBox Grid.Column="1" x:Name="sTxtFirstName" Margin="3"></TextBox>
<TextBlock Grid.Column="2" Text="Last Name:" Margin="3"></TextBlock>
<TextBox Grid.Column="3" x:Name="sTxtLastName" Margin="3"></TextBox>
<TextBlock Grid.Column="4" Text="Gender:" Margin="3"></TextBlock>
<ComboBox Grid.Column="5" x:Name="sCombGender" Margin="3">
<ComboBoxItem Content=""></ComboBoxItem>
<ComboBoxItem Content="Male"></ComboBoxItem>
<ComboBoxItem Content="Female"></ComboBoxItem>
</ComboBox>
<Button x:Name="btnSearch" Grid.Column="6" Margin="3" Height="30" Command="{Binding CMDSearch}" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/PBM;component/Resources/Images/search.png" VerticalAlignment="Center" Margin="0,0,2,0" ></Image>
<TextBlock Text="Search" Width="50" VerticalAlignment="Center" Margin="1,0,0,0"></TextBlock>
</StackPanel>
</Button.Content>
</Button>
You're going about it all wrong. Only use grid for laying out controls on the screen.
Use a ListBox to show a list of items.
Declare your items in an ObservableCollection.
Use data binding to bind the listbox to the observable collection.
Use C# to manipulate the contents of the list in response to your button click, then the list data appears automatically.

Categories