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.
What I need is to move other gui controllers down when I click on the combobox, so that I can clearly see the data inside the combobox. I'm doing this on a windows mobile 8.1 project.
</Grid>
<ComboBox x:Name="comboBoxCompanyLocation" HorizontalAlignment="Left" VerticalAlignment="Top" Width="210" FontSize="13.333" Height="56" Margin="142,87,0,0" DisplayMemberPath="CompanyCity" PlaceholderText="Select a Location"/>
<TextBlock x:Name="textBlockCompanyLocation" HorizontalAlignment="Left" Margin="0,0,0,78" TextWrapping="Wrap" Text="Location" VerticalAlignment="Bottom" RenderTransformOrigin="-0.089,-0.581" FontSize="17.333" Height="38"/>
<Button x:Name="buttonFilterSearch" Content="Filter" HorizontalAlignment="Left" Margin="251,155,0,0" VerticalAlignment="Top" Click="buttonFilterSearch_Click" Width="104"/>
<Button x:Name="buttonResetFilter" Content="Reset" HorizontalAlignment="Left" Margin="142,155,0,0" VerticalAlignment="Top" Click="buttonResetFilter_Click" Width="94"/>
</Grid>
I have a problem in resizing the main window of my app.xaml form: after resizing it, the objects (buttons,combo boxes, textboxes, etc) inside the form are being resized, hidden or moved to another place in the form. I just want to resize the main window not the other objects. in the other words, I want to unlink these two (main window & other objects) from each other. after doing that, I can resize main window and then, manually move the objects to their new place in the form. the code of the form is given below.
<Window x:Class="WPFClient.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="550" Width="834" MaxHeight="550" MaxWidth="834" MinHeight="550" MinWidth="834">
<Grid>
<Grid.Background>
<LinearGradientBrush>
<GradientStop Color="LightSlateGray" Offset="0"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="LightSlateGray" Offset="0.9"/>
</LinearGradientBrush>
</Grid.Background>
<Label x:Name="loginLabelUName" Height="25" HorizontalAlignment="Left" Margin="179,200,0,0" VerticalAlignment="Top" Width="70">User Name:
</Label>
<TextBox x:Name="loginTxtBoxUName" Height="23" Margin="277,200,313,0" VerticalAlignment="Top" />
<Label x:Name="loginLabelIP" HorizontalAlignment="Left" Margin="179,232,0,255" Width="70">Service IP:</Label>
<TextBox x:Name="loginTxtBoxIP" Margin="277,232,313,0" Text="41.235.135.104" Height="23" VerticalAlignment="Top" />
<Button x:Name="loginButtonConnect" Background="Transparent" Margin="277,0,313,222" Click="buttonConnect_Click" Height="23" VerticalAlignment="Bottom">Connect</Button>
<Label x:Name="loginLabelStatus" Height="44" VerticalAlignment="Bottom" FontFamily="Jokerman" FontSize="20" Foreground="White" HorizontalAlignment="Right" Width="167" Margin="0,0,40,71">Offline</Label>
<ComboBox x:Name="loginComboBoxImgs" HorizontalAlignment="Right" Margin="0,200,197,222" Width="98" Background="Transparent" />
<Label x:Name="loginLabelTitle" Height="57" FontFamily="Jokerman" FontSize="25" Foreground="White" Margin="16,16,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="293">WCF / WPF Chat App.</Label>
<Polyline x:Name="loginPolyLine" StrokeThickness="2" Stroke="White" Points="140,90 140,300 700,300 700,90 140,90" Margin="-9,42,116,165" />
<ListBox x:Name="chatListBoxMsgs" Margin="10,62,167,84" />
<ListBox x:Name="chatListBoxNames" HorizontalAlignment="Right" Margin="0,62,10,84" Width="139" />
<CheckBox x:Name="chatCheckBoxWhisper" Height="15" HorizontalAlignment="Right" Margin="0,37,10,0" VerticalAlignment="Top" Width="120" Foreground="White" FontSize="12">Whisper Mode</CheckBox>
<TextBox x:Name="chatTxtBoxType" Height="39" Margin="10,0,313,9" VerticalAlignment="Bottom" />
<Button x:Name="chatButtonSend" Click="chatButtonSend_Click" Height="39" Margin="0,0,167,9" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="136">Send</Button>
<Button x:Name="chatButtonDisconnect" Click="chatButtonDisconnect_Click" Height="39" HorizontalAlignment="Right" Margin="0,0,10,9" VerticalAlignment="Bottom" Width="139">Disconnect</Button>
<Image x:Name="chatCurrentImage" HorizontalAlignment="Left" Margin="10,0,0,0" Stretch="Fill" Width="60" Height="70" VerticalAlignment="Top" />
<Label x:Name="chatLabelCurrentUName" Height="23" HorizontalAlignment="Left" Margin="87,10,0,0" VerticalAlignment="Top" Width="85" Foreground="White"></Label>
<Label x:Name="chatLabelCurrentStatus" Height="23" Margin="87,37,0,0" VerticalAlignment="Top" Foreground="Green" HorizontalAlignment="Left" Width="85"></Label>
<Label x:Name="chatLabelWritingMsg" Height="30" Margin="10,0,167,49" VerticalAlignment="Bottom" Foreground="Gray"></Label>
<Button x:Name="chatButtonSendFile" Click="chatButtonSendFile_Click" Background="Transparent" Height="23" Margin="270,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="105">Send File</Button>
<Label x:Name="chatLabelSendFileStatus" Height="28" Margin="270,32,316,0" VerticalAlignment="Top"></Label>
<Button x:Name="chatButtonOpenReceived" Click="chatButtonOpenReceived_Click" Background="Transparent" Height="23" Margin="382,10,313,0" VerticalAlignment="Top">Open Received Files</Button>
</Grid>
</Window>
The reason why this is occurring is because you are explicitly setting Margin properties on your elements.
Margin="277,232,313,0"
These margins are relative to the parent Grid. So the code above says:
Place the element 277 from the left, 232 from the top, 313 from the right and 0 from the bottom.
Therefore, when the Grid gets resized, these margins will be recalculated, and thus, screw up the positioning of the elements.
To combat this, you should look into using relative positioning. There is already an answer to this question here.
I found a simple solution.when I select an object like button or ..., a small link icon(similar to above Hyperlink icon) appears on each edge of the object (or on grids around it). by clicking on these icons, you can change them into Unlinked or Linked situation. now when you want to resize the main window, you should do the following:
1. move all the objects to the new place you want in the form.
2. select the objects one after another and click on link icon at the side that you want to decrease the main window's width or height from that side.for example, if you want to decrease the width/height of the window from right/down side, you should unlink every "right/down" side link icon.
3. resize the width or height of main window by dragging its edge according to the 2nd step example. you can see that resizing window does not affect other objects at all.
I have a stack panel with a set of four image buttons inside of it. When I try to search by the name of the image button it comes back null. What is wrong with my code?
XAML:
<StackPanel x:Name="swatchClearStackPanel" Orientation="Vertical" Grid.Column="1" Grid.Row="2" Margin="0,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<imgbutton:ImageButton x:Name="ClearSwatchColor1" Grid.Row="0" Grid.Column="2" Style="{DynamicResource ButtonClearSwatchColor}" Margin="5,8,5,5" HorizontalAlignment="Left" Visibility="Hidden" Click="ClearSwatchColor_Click" />
<imgbutton:ImageButton x:Name="ClearSwatchColor2" Grid.Row="0" Grid.Column="2" Style="{DynamicResource ButtonClearSwatchColor}" Margin="5,18,5,5" HorizontalAlignment="Left" Visibility="Hidden" Click="ClearSwatchColor_Click"/>
<imgbutton:ImageButton x:Name="ClearSwatchColor3" Grid.Row="0" Grid.Column="2" Style="{DynamicResource ButtonClearSwatchColor}" Margin="5,18,5,5" HorizontalAlignment="Left" Visibility="Hidden" Click="ClearSwatchColor_Click"/>
<imgbutton:ImageButton x:Name="ClearSwatchColor4" Grid.Row="0" Grid.Column="2" Style="{DynamicResource ButtonClearSwatchColor}" Margin="5,20,5,5" HorizontalAlignment="Left" Visibility="Hidden" Click="ClearSwatchColor_Click"/>
</StackPanel>
And the C#:
EDIT: Note: The button name is hard coded to show that it cannot find it, the end result will be a variable as its one method that several buttons will reference. This code triggers after the UI has loaded. (The user clicks a button and this code runs. Same window, same everything.)
var swatchClearButton = swatchClearStackPanel.FindName("ClearSwatchColor1");
I'm trying to build in .xaml a Context Menu which i can no longer find in my library's so i switched to trying PopUp.
Which seems to be working i just cant view it, i need it to run first thing when my Application Loads because it will work as a log in Screen.
Can any one help me figure out how to Make this visible Right after initialization of the application?
Thank you in advance!
Keeano Martin.
some Code.
(.xaml)
<Grid x:Name="ContentGrid" Grid.Row="1">
<Popup x:Name="loginPopUpwindow" Height="250" Width="300" Margin="1" VerticalAlignment="Bottom" HorizontalAlignment="Center">
<TextBlock Height="33" HorizontalAlignment="Left" Margin="0,160,0,0" Name="loginTextBlock" Text="Login" VerticalAlignment="Top" Width="474"/>
</Popup>
<TextBlock Height="33" HorizontalAlignment="Left" Margin="0,160,0,0" Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="474" />
</Grid>
(C#)
public MainPage()
{
InitializeComponent();
loginPopUpwindow.IsOpen = true;
}
In your XAML, did you try
<Popup IsOpen="True"></Popup>
to make it show as soon as the XAML loads?
It works in a desktop program.