I am new to UWP and try to learn a few basics, but i am currently struggling.
I have a button "To-Do" and want to Display a Image of a to-do-list above the button.
So i try this.. but that doesnt show me the Image. What did i wrong?
Thank you for your help!!!
<StackPanel Grid.Column="2" Margin="0,60,0,0">
<Grid>
<Image Source="/Bilder/todo.png" Width="100" Height="100" Grid.RowSpan="8" Grid.Row="1"/>
</Grid>
<Button x:Name="btnNaviZuToDo" Content="To-Do Liste" Height="86" Width="250" FontSize="40" Click="Button_NavigiereZuToDo" Margin="0,0,-2,0" HorizontalAlignment="Center" FontFamily="Calibri Light"/>
</StackPanel>
Please check your image path is correct.
Usually we will use ms-appx:/// as a prefix to define the root directory of the project. If the picture is in the Assets folder (which in the root of project), you can write: ms-appx:///Assets/todo.png, you can adjust your picture path accordingly.
Thanks.
you need to set todo.png's build action to Content.
Related
I need to display our app logo on the main page of the application but no matter what I do, nothing shows up.
<Image
Source="{StaticResource 'MystronicsWinder.Resources.AppIcon.appicon.svg'}"
Margin="20"
Aspect="AspectFill"
IsVisible="true"/>
UPDATE:
<Image
Source="{StaticResource 'MystronicsWinder.Resources.AppIcon.appicon.png'}"
Margin="20"
Aspect="AspectFill"
WidthRequest="300"
HeightRequest="300"
IsVisible="true"/>
I have the same issue with my png logo!
For displaying SVG images I use my library which you can find here: https://github.com/FreakyAli/Maui.FreakyControls
It uses Skia to display SVG images : https://github.com/FreakyAli/Maui.FreakyControls/wiki/FreakySvgImageView
Build action of all SVG images you want to use needs to be set to EmbeddedResource.
<freakyControls:FreakySvgImageView
Command="{Binding OnTapCommand}"
CommandParameter="{Binding OnTapCommandParam}"
Tapped="FreakySvgImageView_Tapped"
SvgAssembly="{x:Static samples:Constants.SvgAssembly}"
SvgMode="AspectFit"
ResourceId="{x:Static samples:Constants.DotnetBot}"/>
I am new to MAUI. And I haven't done anything complex with Xamarin as well.
The application I am testing with, has Shell navigation. And I can't find a way to change the toolbar items.
I would like to be able to change either the FontSize of the text, or the color of the SVG image. And I do not want those changes to affect the rest of my application, if possible. But if there is no other way, I can live with it.
I have managed to add styling to buttons, Labels etc... If styling is an option to this, it will be even better.
If I am on the wrong path, if you point me out why, I will be also grateful.
Thank you in advance!
If you want to just change a part of pages in your project. You can try to use a <Shell.TitleView> instead of the <Shell.ToolBarItem> in the content pages you want. Such as:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppTest.MainPage">
<Shell.TitleView>
<HorizontalStackLayout Margin="5" HorizontalOptions="End">
<Label Text="hello" TextColor="Red" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="End" />
<Image Source="your image" Margin="10" Background="green"/>
</HorizontalStackLayout>
</Shell.TitleView>
You can change style of TabBar in Style.xaml in path \Resources\Style\. Search in file for Shell.TabBarForegroundColor. You will get TargetType="Shell" and this is style for AppShell.xaml.
I have a listbox with the following structure. Data displays well and no issues there. I want to get some animation affect for the StackPanel, but since it is inside the DataTemplate, I am not able to use Blend to get my desired animation affect.
I guess I can write an event handler and code for that, but is that the best approach of achieving animation for ListBox items?
<ListBox Height="600" ItemsSource="{StaticResource learn}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="100" Orientation="Horizontal">
<TextBlock Width="0" Text="{Binding ID}" />
<Image Height="100" Width="100"/>
<StackPanel Orientation="Vertical" Width="319" VerticalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="{Binding Text}" Margin="6,0,0,0" FontSize="29.333" />
<TextBlock TextWrapping="Wrap" Text="{Binding Description}" Margin="6,0,0,0" FontSize="16"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Okay, all you need to do is to create a new user control and add all your animations to that user control and start animation where you want. In the list box data template, create an instance of that data template.
Steps to reproduce:
Create a new User Control in the project.
Give in the animations to the animations to that user control in blend.
Add the user control in data template.
Start the animations where ever you want.
Alternative: Without creating a new user control you can specify animations by creating storyboard and applying required transformations. this gives a common animation to all the list box items.
I am trying to do a simple example of the typical slider.value binded to a textblock. I have tried to maintain it so simple that I cannot find what would be the problem here.
I have this simple XAML code and NO code behind:
<phone:PhoneApplicationPage
.......
.......
.......
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" />
</Grid>
</phone:PhoneApplicationPage>
With this code, the slider movement is locked. If I remove the TextBlock binding then all works fine (but no value on TextBlock, of course) :-)
It seems so simple that I know something very, very stupid is locking my brain.
I have tried the 'Binding' in anyway you can imagine, but no luck at the moment.
Any help and any explanation, please ?
Try setting maximum and minimum properties on your slider.
OK, try a stackpanel for your layout:
<StackPanel x:Name="LayoutRoot" Background="White">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" Height="30" />
</StackPanel>
I think the issue is that your controls are sitting on top of each other.
I want to put the one image on left corner and another on right corner of Control(ex :button) and need click event for that.
please tell me....
What have you tried?
Something like this should work but it depends on exactly what you're after:
<Button Click="myClickHandler">
<Grid>
<Image Source="image1.jpg" HorizontalAlignment="Left" Stretch="None" />
<Image Source="image2.jpg" HorizontalAlignment="Right" Stretch="None" />
</Grid>
</Button>
Disclaimer: the above is untested and written freehand. I make no guarantees of it compiling, etc.