I have simple problem. I want to add image to buttons and there is one case I can't manage. In designer everything works properly, but in debug mode there is no trace of a picture inside the button. I read that I have to set Build Action property of the image to "Recourses" or "Content" but I don't have these pictures in Solution Explorer, exactly I can see them when I click "Show All Files but they have strange icon not as the one image which I can normally see in Solutions Explorer and no Build Action property.
Am I supposed to add images in different way?
<Button x:Name="loadButton" HorizontalAlignment="Left" Margin="955,0,0,443" Style="{DynamicResource SimpleButton}" VerticalAlignment="Bottom" Width="29" Height="27" FontFamily="Courier New" FontWeight="Bold" Click="loadButton_Click" Background="{x:Null}" BorderBrush="{x:Null}">
<StackPanel Orientation="Horizontal">
<Image x:Name="Load" Source="open-map.png"/>
</StackPanel>
</Button>
<CheckBox x:Name="mode" Content="Tryb tworzenia" HorizontalAlignment="Left" Margin="30,292,0,0" VerticalAlignment="Top" FontSize="18.667" Foreground="#FFAC3333" FontFamily="Courier New" IsChecked="True"/>
<Button x:Name="button1_Copy" HorizontalAlignment="Left" Margin="912,0,0,443" Style="{DynamicResource SimpleButton}" VerticalAlignment="Bottom" Width="29" Height="27" FontFamily="Courier New" FontWeight="Bold" Click="button1_Copy_Click" Background="{x:Null}" BorderBrush="{x:Null}">
<StackPanel Orientation="Horizontal">
<Image x:Name="Save" Source="save-icon.png"/>
</StackPanel>
</Button>
Thank in advanced
The files like open-map.png are not part of the C# project so you can't set any properties. Right click on the C# project and add the file to the project, then you'll be able to set its properties.
Related
Please could someone assist me in trying to figure this out.
I have created a menu on a WPF page called DashView.xaml
this menu has buttons on it going down and I would like to know how to get the BottomDrawerContent to be visible once I click on a button.
Below I have given the code that is in DashView.xaml
<materialDesign:DialogHost x:Name="hostSales" >
<materialDesign:DrawerHost x:Name="SalesDrawerHost" Content="Sales" Foreground="GhostWhite"
FontWeight="Bold" FontSize="22" BottomDrawerCloseOnClickAway="True"
Cursor="Hand" Width="200" Height="30" ToggleButton.Checked="chkSalesBt1">
<materialDesign:DrawerHost.BottomDrawerContent x:Uid="dashSalesBt1">
<StackPanel x:Name="stkSalesBt1">
<Button Content="Record Sales" Foreground="GhostWhite" FontWeight="SemiBold"/>
<Button Content="Recent Sales" Foreground="GhostWhite" FontWeight="SemiBold"/>
</StackPanel>
</materialDesign:DrawerHost.BottomDrawerContent>
</materialDesign:DrawerHost>
</materialDesign:DialogHost>
I do have a class called DashClass.cs
Just not sure what I am meant to put in it or how I am meant to get the execution to show the BottomDrawerContent
Yout need a tooglebutton:
<ToggleButton
x:Name="menuToggler"
Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />`
and in the DrawerHost use IsLeftDrawerOpen
<materialDesign:DrawerHost
x:Name="SalesDrawerHost"
Content="Sales"
Foreground="GhostWhite"
FontWeight="Bold"
FontSize="22"
BottomDrawerCloseOnClickAway="True"
Cursor="Hand"
Width="200"
Height="30"
IsBottomDrawerOpen="{Binding ElementName=menuToggler, Path=IsChecked}">
<materialDesign:DrawerHost.BottomDrawerContent x:Uid="dashSalesBt1">
<StackPanel x:Name="stkSalesBt1">
<Button Content="Record Sales" Foreground="GhostWhite" FontWeight="SemiBold"/>
<Button Content="Recent Sales" Foreground="GhostWhite" FontWeight="SemiBold"/>
</StackPanel>
</materialDesign:DrawerHost.BottomDrawerContent>
</materialDesign:DrawerHost>
I have a simple WPF application
<Grid>
<Border BorderBrush="Black" BorderThickness="1"
HorizontalAlignment="Left" Height="388" Margin="10,10,0,0" VerticalAlignment="Top" Width="329"/>
<Image x:Name="PreviewImg" HorizontalAlignment="Left" Height="400" Margin="10,10,0,0" VerticalAlignment="Top" Width="329" MouseDown="PreviewImgMouse" AllowDrop="True" PreviewMouseWheel="PreviewImg_PreviewMouseWheel" MouseEnter="Entered" Focusable="True"></Image>
<Label Content="Matched Products" HorizontalAlignment="Left" Margin="344,10,0,0" VerticalAlignment="Top" Width="290"/>
<Label Content="Unknown Products" HorizontalAlignment="Left" Margin="661,10,0,0" VerticalAlignment="Top" Width="290"/>
<TextBlock x:Name="MatchedProducts" HorizontalAlignment="Left" Margin="349,36,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="362" Width="295"/>
<TextBlock x:Name="UnknownProducts" HorizontalAlignment="Left" Margin="666,36,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Height="362" Width="295"/>
<Grid HorizontalAlignment="Left" Height="50" Margin="10,410,0,0" VerticalAlignment="Top" Width="957">
<Button x:Name="FinalizeBtn" Content="Finalize" HorizontalAlignment="Left" Margin="826,10,0,0" VerticalAlignment="Top" Width="120" Height="30"/>
<Button x:Name="NewEntryBtn" Content="Create new entry" HorizontalAlignment="Left" Margin="701,10,0,0"
VerticalAlignment="Top" Width="120" Height="30"/>
<Button x:Name="FreeBtn" Content="Free Button" HorizontalAlignment="Left" Margin="576,10,0,0" VerticalAlignment="Top" Width="120" Height="30"/>
</Grid>
</Grid>
All the events defined under the Image component are not firing, I tried all of googles first page searches, but none of them work.
I read about the difference of Routed events in my application both MouseDown and PreviewMouseDown should work.
The only thing that can block the image is Border component, but I did try without it and still nothing, and since it is declared first the image should overlay it...?
All function names are correct since they were automatically generated.
I can paste in the .cs file if it can help.
Thanks
E1: Somehow it works now, but I have no idea what fixed it...
One change I did was mode the image inside the border:
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="388" Margin="10,10,0,0" VerticalAlignment="Top" Width="329">
<Image x:Name="PreviewImg" Height="400" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="329" MouseDown="PreviewImgMouse" AllowDrop="True" PreviewMouseWheel="PreviewImg_PreviewMouseWheel" MouseEnter="Entered" Focusable="True"/>
</Border>
But I can't image that this fixed it.
You need to define a source for your image like <Image Source="image.jpg". Without the image the events will not fire.
For advanced users
Use a Button styled as an Image, see #Richard's answer with WPF Image Control with Click event
For beginners
The Image component needs a source to fire events as posted by #Örvar. Adding a transparent source is the solution, although a hacky one.
One way of achieving what you want is to place the image in a button and removing the button styles. There is an excellent example here:
WPF Image Control with Click Event
I cannot find the background-Image Property in the properties panel of the button, I have the images stored for each button in the root directory of my solution as Jpegs, the project is a WPF and I don't know how to set the image in the XAML or C# code. I am developing in Visual Studio 2017 Community Edition
All problems I have seen before are for different versions of Visual Studio, so I can't find the answer
*edit - i am trying to change the background image of a button at design time in the XAML editor, not create an onclick button to change a background image. So if i have this button in XAML:
<Button x:Name="keyBtn"
Content="Keyboard/Mouse"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0"/>
Which Part should I refer to in the ".background" property?
It is probably easier than you think..
Try this after you add the image to your project.
<Button x:Name="keyBtn"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0">
<Image Source="myImage.png" />
</Button>
Note that you need to remove the content since now the image is the content.
If you wish the text as well - you can try this:
<Button x:Name="keyBtn"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Background="#FFB41717"
Margin="0,-31,0,0">
<Grid>
<Image Source="myImage.png" Stretch="Fill" />
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Keyboard/Mouse" />
</Grid>
</Button>
And there is another option - which might be exactly what you are looking for:
<Button x:Name="keyBtn"
Content="Keyboard/Mouse"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="400" Height="800" FontFamily="Verdana"
Margin="0,-31,0,0">
<Button.Background>
<ImageBrush ImageSource="myImage.png" Stretch="Fill" />
</Button.Background>
</Button>
But in that last option - you will have to remove the Background color as it is being replaced by the image.
Does anyone knows why this is wrong? The thing that doesn't work is the imageBrush.
<Window x:Class="ProjectChallenge.Login"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Login" Height="403.3" Width="575.258">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="/bin/Debug/openboek.jpg"/>
</Grid.Background>
<TextBox x:Name="naamTextBox" HorizontalAlignment="Left" Height="23" Margin="144,139,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="196"/>
<PasswordBox x:Name="passwordPasswordBox" HorizontalAlignment="Left" Margin="144,179,0,0" VerticalAlignment="Top" Width="196" Height="26"/>
<Label x:Name="naamLabel" Content="Naam:" HorizontalAlignment="Left" Margin="74,139,0,0" VerticalAlignment="Top" />
<Label x:Name="PasswordLabel" Content="Passwoord:" HorizontalAlignment="Left" Margin="74,179,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.545,2.154" />
<Button x:Name="loginButton" Content="Log in" HorizontalAlignment="Left" Margin="404,139,0,0" VerticalAlignment="Top" Width="75" Click="loginButton_Click"/>
<Label Name="AccountLabel" Content="Nog geen account? Klik hier!" HorizontalAlignment="Left" Margin="144,224,0,0" VerticalAlignment="Top" Width="169" Height="35"/>
<Label Content="Welkom!" HorizontalAlignment="Left" Margin="116,78,0,0" VerticalAlignment="Top" FontSize="24" FontWeight="Bold"/>
<Button Name="sluitButton" Content="Sluiten" HorizontalAlignment="Left" Margin="404,182,0,0" VerticalAlignment="Top" Width="75" Click="sluitButton_Click"/>
</Grid>
</Window>
Don't use an absolute path, WPF knows how to handle an image that is properly part of the project.
Add a Folder (Images) in your Solution Explorer, then "Add existing item" to add the picture to it. The build action should be set to "Resource" automatically.
Then simply use:
<ImageBrush ImageSource="/Images/openboek.jpg"/>
Ok,
I have tried the Xaml you postyed and it works fine. What you should do is right click project -> add -> Existing item -> (find your image). Then right click image -> Properties. then change "Copy to output Directory" to "Copy if newer". That should work.
You should also update the imagepath depending on where your image resides. If you just add to the project this would be the path: ImageSource="../openboek.jpg" If you add to an image folder: ImageSource="../Images/openboek.jpg"
as Clemens points out, this works, but the correct way is to just add the image and not change the "Copy to output Directory" property. The path should then be "/Images/openboek.jpg" (if you have it in a Images folder, which you should) See Holtermans answer
I downloaded a font, and I created a folder Fonts inside the Assest in my project and used the following XAML code to set the font.
<TextBlock HorizontalAlignment="Left"
Height="107"
Margin="154,75,0,0"
TextWrapping="Wrap"
Text="Brain Train"
VerticalAlignment="Top"
Width="310"
FontSize="60"
FontFamily="./Assets/Fonts/Foxes In Love.ttf#Foxes In Love"
FontWeight="Thin"
Grid.RowSpan="2" />
In the Designer, when I add the Upper XAML Code, the font changes but when I run the app the font is set to default (not the Custom).
Why?
MAKE small changes in your path according to this link
click here
<TextBlock HorizontalAlignment="Left" Height="107" Margin="154,75,0,0"
TextWrapping="Wrap" Text="Brain Train" VerticalAlignment="Top"
Width="310" FontSize="60"
FontFamily=".\Fonts\Foxes In Love.ttf#Foxes In Love" FontWeight="Thin" Grid.RowSpan="2"/>