The Image tag renders the SVG file properly whereas the ImageButton doesn't.
What am I doing wrong?
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="cart_dark.png" HeightRequest="24" WidthRequest="24" />
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>
<Image Margin="0,10,10,10" Source="cart_dark.png" HeightRequest="24" WidthRequest="24"/>
<Image Margin="0,10,10,10" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
<Image Margin="0,10,50,10" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>
I have the same problem. I haven't found a solution yet, but as a temporary workaround you can place an Image behind the ImageButton
<Grid>
<Image Margin="0,10,10,10" Source="cart_dark.png" HeightRequest="24" WidthRequest="24"/>
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="cart_dark.png" HeightRequest="24" WidthRequest="24" />
</Grid>
<Grid>
<Image Margin="0,10,10,10" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="save_dark.png" HeightRequest="24" WidthRequest="24"/>
</Grid>
<Grid>
<Image Margin="0,10,50,10" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>
<ImageButton Margin="0,10,10,10" Padding="0,0,0,0" CornerRadius="0" Source="settings_dark.png" HeightRequest="24" WidthRequest="24"/>
</Grid>
The Image will be visable behind the ImageButton while the ImageButton remains clickable.
ps: For those wondering about the png ending for the svg files: If you use the svg ending the image will not be displayed, while it will be with the png ending even though its an svg. If you look at a new Maui project you will see that they did the same in the template for the dotnet_bot.svg image.
Too big SVG Width/Height (in view box or self size of path)
Header problem. Try open in editor and save again (etc Adobe Illustrator, Gravit Designer)
Related
I am trying to write on panaroma application in tile image title.
And I can not see like a below code in .xaml page;
<image Title="blabla" ...>
This is my code;
<phone:PanoramaItem Header="Kişisel Bilgiler" Orientation="Horizontal">
<!--Double wide Panorama with large image placeholders-->
<Grid>
<StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
<toolkit:WrapPanel>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
</toolkit:WrapPanel>
</StackPanel>
</StackPanel>
</Grid>
</phone:PanoramaItem>
But I want to
Thank is advance.
(Sorry my language)
Image control doesn't have any property to display text similar to Tile's title. You need to add other control to display the title, for example using TextBlock :
<toolkit:WrapPanel>
<Grid>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
<TextBlock Margin="0,150,0,0" Text="Tile Title" Foreground="White"/>
</Grid>
</toolkit:WrapPanel>
You may also want to try HubTile control as an alternative.
Not being at all familiar with XAML, I'm trying to get a very simple layout designed where the main page consists of two parts:
On the left, I want an image that will scale to fit the available height but maintain its aspect ratio.
On the right, I want a panel that will eventually contain text and controls - at the moment I just have text.
I can get the image to behave ok by using a ViewBox but I can't seem to get the right side of the screen to fill the remaining gap. See screenshot:
What I want is for the area that contains the text to stretch to the right with the text centred within it.
The relevant XAML code is:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<Viewbox HorizontalAlignment="Right">
<Image Source="Assets/ABCImage.png"></Image>
</Viewbox>
<StackPanel Orientation="Vertical">
<TextBlock Text="ABC Viewer"
TextAlignment="Center"
FontSize="48"></TextBlock>
<TextBlock Text="Test application"
TextAlignment="Center"
FontSize="24"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
This is taking me far too long to figure out. Can someone please put me out of my misery?
Try this :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0"
HorizontalAlignment="Right">
<Image Source="Assets/ABCImage.png"></Image>
</Viewbox>
<StackPanel Grid.Column="1">
<TextBlock Text="SEM Viewer"
TextAlignment="Center"
FontSize="48" />
<TextBlock Text="Test application"
TextAlignment="Center"
FontSize="24" />
</StackPanel>
</Grid>
I have created a multiselectlist that included a stackpanel and with images and text that each correspond to a checkbox control. My implementation works correctly, although I cannot get the image and text to align correctly with the checkbox! I was wondering if there was a better way than simply adjusting the margins, but if not how could this be accomplished?
MainPage.xaml
<toolkit:MultiselectList x:Name="connectionTypeMultiSelectList" HorizontalAlignment="Left" VerticalAlignment="Top" Tap="connectionTypeMultiSelectList_Tap">
<toolkit:MultiselectList.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0"/>
<TextBlock Text="{Binding Name}" Margin="10"/>
</StackPanel>
</DataTemplate>
</toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>
Try setting the height of the stackpanel and specify the image to fit and text as TextAlign=Center.
Try the following margin values in your design and let me know if it works or not. It worked for dummy data which I created. I hope it works for you too.
<StackPanel Orientation="Horizontal" Margin="12,0,0,0">
<Image Source="{Binding Icon}" Width="35" Height="35" Margin="0,-12,0,0"/>
<TextBlock Text="{Binding Name}" Margin="12,5,0,0"/>
</StackPanel>
<ListBox Margin="0,2,0,0" SelectionChanged="OnSelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" x:Name="lstUcpPanel" ItemContainerStyle="{StaticResource myContainerStyle}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="Auto" Height="Auto" Margin="-7,-8,-7,0" ItemWidth="246" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" Margin="3.5,1,0,0" BorderBrush="Transparent">
<StackPanel Orientation="Vertical" Background="LightGray">
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" ></Image>
<TextBlock Text="{Binding name}" TextWrapping="Wrap" Foreground="Black" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I am using the above code for showing a data as in following format:
but when the [name] is long like "Settings flkjadsflka fdsaflksdj flhasdjhfl asd", then the design becomes like this:
What i want to know is that is there anyway i can show the items in a uniform format without any distortion with uniform height of the item.
Set the stretch property on your image to Stretch="Fill"
<Image Height="115" Width="115" Margin="2" Source="{Binding categoryImageName}" Stretch="Fill" ></Image>
How about giving the items in the WrapPanel a fixed Height?
<toolkit:WrapPanel ItemHeight="80" ... />
hei,
assume that i have this code:
<StackPanel>
<Canvas x:Name="canvas" Height="400" Width="235">
<Image x:Name="image" Source="/SplashScreenImage.jpg" Stretch="Fill">
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
<TextBlock Canvas.ZIndex="1" Text="TextBlock" Canvas.Left="61" Canvas.Top="150"/>
</Canvas>
<TextBlock HorizontalAlignment="Center" >Test</TextBlock>
</StackPanel>
What i want to do is the canvas's width and height properties linked to image. something like this:
<Canvas x:Name="canvas" Height="{image Height}" Width="{image Width"}>
since I have been previously using Qt Quick and this is quite easy, they call it property binding. I am wondering if this is possible in XAML as well ?
Thanks.
I think I found the solution, example:
<StackPanel>
<TextBox Margin="10" x:Name="txtData" />
<TextBlock Margin="10"
Text="{Binding ElementName=txtData,
Path=Text}" />
</StackPanel>