Issue with button with image not showing in Windows Server 2012 - c#

i've made an application in WPF with custom minimize, maximize and close buttons. In Windows 10 all works fine but when i install the application on an Windows 2012 server the Images in the button are gone. When you click on the the place where the buttons ment to be the actions work fine only no Images.
When i resize the app the images appear to be stuk in the middel of the application. when i resize smaller the image stay in the button when i go bigger the images leave the buttons.
What is going on. Is there anyone who had the same issue?
<Button x:Name="MinimizeButton" Padding="3" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,55,0" Click="MinimizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/minimizeIconRed.png" Height="23" Width="23"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="MaximizeButton" Padding="4" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,30,0" Click="MaximizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/maximizeIconRed.png" Height="23" Width="23"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="25" Padding="4" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,5,0" HorizontalAlignment="Right" Click="Button_Click_1" Grid.Column="1" Background="{x:Null}">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/closeIconRed.png" Height="23" Width="23"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>


The problem is with the default LowQuality BitmapScalingMode (default changed in 4.0)
Changing to RenderOptions.BitmapScaling="HighQuality" seemed to fix the issue for me.
<Button x:Name="MinimizeButton" Padding="3" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,55,0" Click="MinimizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/minimizeIconRed.png" Height="23" Width="23" RenderOptions.BitmapScalingMode="HighQuality"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="MaximizeButton" Padding="4" Width="25" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,30,0" Click="MaximizeButton_Click" HorizontalAlignment="Right" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/maximizeIconRed.png" Height="23" Width="23" RenderOptions.BitmapScalingMode="HighQuality"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="25" Padding="4" BorderThickness="1" BorderBrush="White" Height="25" VerticalAlignment="Top" Margin="0,0,5,0" HorizontalAlignment="Right" Click="Button_Click_1" Grid.Column="1" Background="{x:Null}">
<Button.Template>
<ControlTemplate>
<Grid>
<Image Source="Images/closeIconRed.png" Height="23" Width="23" RenderOptions.BitmapScalingMode="HighQuality"/>
<ContentPresenter/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

Related

Why is my image becoming pixelated during runtime?

So whenever I am working with the application in the design window and I am zoomed in, the image is not blurry at all
However as soon as I run the application it looks like this.
It gets very pixelated and I have no idea why.
Here is the XAML code for the button
<Button Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
<Grid>
<Image UseLayoutRounding="True" IsHitTestVisible="False" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
<TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
</Grid>
</Button>
And the Template
<Setter Property="Background" Value="#2d2d30"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1" Padding="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#686868"/>
</Trigger>
</Style.Triggers>
</Style>
And the original image that I am using.

You shouldn't be using a bitmap icon at all.
Either use a symbol from a font
<Button Width="100" Height="30">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="24" Text=""/>
<TextBlock VerticalAlignment="Center" Text=" Add Product"/>
</StackPanel>
</Button>
or a Path with a vector drawing:
<Button Width="100" Height="30">
<StackPanel Orientation="Horizontal">
<Path Stroke="Black" StrokeThickness="1.5"
StrokeStartLineCap="Round" StrokeEndLineCap="Round">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="9,9" RadiusX="9" RadiusY="9"/>
<LineGeometry StartPoint="5,9" EndPoint="13,9"/>
<LineGeometry StartPoint="9,5" EndPoint="9,13"/>
</GeometryGroup>
</Path.Data>
</Path>
<TextBlock VerticalAlignment="Center" Text=" Add Product"/>
</StackPanel>
</Button>

I think you should try out different RenderOptions.BitmapScalingModes (as mentioned here)
<Button Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
<Grid>
<Image UseLayoutRounding="True" IsHitTestVisible="False" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png"
RenderOptions.BitmapScalingMode="Fant"
/>
<TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
</Grid>
</Button>
For images with low color count (like in your case), NearestNeighbour works the best.

In the XAML the Height and the Width of the image are set to 20 and the size of the original image is 128 by 128. So WPF has to scale the image down quite a bit. That will result in a pixelated/rough image (especially with round shapes)
Solution: recreate the image in its correct size (20x20).

Need images with lower resolution "stretched" to screen size

I am making a video game using C# WPF.
What I am trying to implement now, is to add additional resolutions.
My default monitor resolution is 1600x900.
I am using the same size for game's window and grids.
Now, I want to add more resolutions. I already found an easy way to change values in code, the problem is on another topic.
That's how the game looks on 1600x900.
Then, I am trying to set resolution 800x600.
What I want to achieve, is to make images with resolution lower then the one set in Windows, to get "stretched" and still cover the all screen.
That's what I get. The game only takes a part of the screen, and white background on the remaining part.
The stretched window, what I am trying to achieve looks like that. To create this image I stretched the previous image in graphics editor. I want the game do it by itself.
If you look at first and third screens at full size, you'll notice they are different, and that lower image has worse detail.
How can the window or grid has resolution lower that one in Windows, but still cover full screen?
UPDATE: Code for one of game screens - the main menu
<Grid x:Name="areaMenu" Panel.ZIndex="1010" HorizontalAlignment="Left" Height="786" Margin="0,-813,0,0" VerticalAlignment="Top" Width="1366" IsVisibleChanged="areaMenu_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/Menu_main.jpg"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<Grid x:Name="areaLoad" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-556,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaLoad_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_Load_Game.jpg" Stretch="Uniform"/>
</Grid.Background>
<Button x:Name="btnLoad1" Panel.ZIndex="100" HorizontalAlignment="Left" Height="98" VerticalAlignment="Top" Width="170" Click="btnLoad1_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="45,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad2" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="166" Click="btnLoad2_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="263,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad3" Panel.ZIndex="100" HorizontalAlignment="Left" Height="103" VerticalAlignment="Top" Width="170" Click="btnLoad3_Click" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="480,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Image x:Name="imgLoad1" HorizontalAlignment="Left" Height="101" Margin="44,144,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad2" HorizontalAlignment="Left" Height="101" Margin="262,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad3" HorizontalAlignment="Left" Height="101" Margin="477,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad4" HorizontalAlignment="Left" Height="101" Margin="694,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgLoad5" HorizontalAlignment="Left" Height="101" Margin="913,132,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Button x:Name="btnLoad4" Panel.ZIndex="100" HorizontalAlignment="Left" Height="103" VerticalAlignment="Top" Width="166" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="695,133,0,0" Click="btnLoad4_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad5" Panel.ZIndex="100" HorizontalAlignment="Left" Height="98" VerticalAlignment="Top" Width="166" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="914,133,0,0" Click="btnLoad5_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoadCancel" Panel.ZIndex="100" HorizontalAlignment="Left" Height="86" VerticalAlignment="Top" Width="162" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="1131,139,0,0" Click="btnLoadCancel_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Grid x:Name="areaSave" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-285,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaSave_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_Save_Game.jpg" Stretch="Uniform"/>
</Grid.Background>
<Button x:Name="btnSaveEmpty1" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="166" Click="btnSave1_Click" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="47,133,0,0">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty2" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="159" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="270,137,0,0" Click="btnSave2_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty3" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="166" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="480,139,0,0" Click="btnSave3_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty4" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="164" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="700,133,0,0" Click="btnSave4_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSaveEmpty5" Panel.ZIndex="100" HorizontalAlignment="Left" Height="93" VerticalAlignment="Top" Width="164" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="917,139,0,0" Click="btnSaveEmpty5_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Image x:Name="imgSave1" HorizontalAlignment="Left" Height="101" Margin="43,143,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave2" HorizontalAlignment="Left" Height="101" Margin="263,131,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave3" HorizontalAlignment="Left" Height="101" Margin="478,131,0,0" VerticalAlignment="Top" Width="172" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave4" HorizontalAlignment="Left" Height="101" Margin="693,131,0,0" VerticalAlignment="Top" Width="173" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Image x:Name="imgSave5" HorizontalAlignment="Left" Height="101" Margin="913,131,0,0" VerticalAlignment="Top" Width="173" Source="Resources/Images/Interface/default.bmp" Stretch="Fill"/>
<Button x:Name="btnSaveCancel" Panel.ZIndex="100" HorizontalAlignment="Left" Height="86" VerticalAlignment="Top" Width="162" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="1131,139,0,0" Click="btnSaveCancel_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Image x:Name="imgResume" HorizontalAlignment="Left" Height="215" Margin="469,105,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_resume_g.png"/>
<Image x:Name="imgSave" HorizontalAlignment="Left" Height="215" Margin="469,205,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_save_g.png"/>
<Image x:Name="imgLoad" HorizontalAlignment="Left" Height="215" Margin="469,306,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_load_g.png"/>
<Image x:Name="imgOptions" HorizontalAlignment="Left" Height="215" Margin="469,406,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_options.png"/>
<Image x:Name="imgCredits" HorizontalAlignment="Left" Height="215" Margin="469,506,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_credits.png"/>
<Image x:Name="imgQuit" HorizontalAlignment="Left" Height="215" Margin="469,587,0,-11" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_quit.png" Grid.RowSpan="2"/>
<Button x:Name="btnResume_Game" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,180,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnResume_Game_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnSave_Game" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,280,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnSave_Game_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnLoad_Game" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,379,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnLoad_Game_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnOptions" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,479,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnOptions_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnCredits" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,581,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnCredits_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="btnQuit" Panel.ZIndex="100" HorizontalAlignment="Left" Height="72" Margin="534,679,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnQuit_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<MediaElement x:Name="musTheme3" Panel.ZIndex="1001" HorizontalAlignment="Left" Height="47" Margin="1290,21,0,0" VerticalAlignment="Top" Width="50" Source="Resources/Music/theme_3.wav" LoadedBehavior="Manual" RenderTransformOrigin="3.464,0.571" MediaOpened="AnySoundStart" MediaEnded="musTheme3_MediaEnded"/>
<Image x:Name="imgNew" HorizontalAlignment="Left" Height="215" Margin="469,105,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_new_g.png" d:IsHidden="True"/>
<Button x:Name="btnNew_Game" Panel.ZIndex="200" HorizontalAlignment="Left" Height="72" Margin="534,180,0,0" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="btnNew_Game_Click_1">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
<Image x:Name="imgNew_Pressed" HorizontalAlignment="Left" Height="215" Margin="469,107,0,0" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/Menu_new_g.png" d:IsHidden="True" Visibility="Hidden"/>
<Grid x:Name="areaGameSaved" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-839,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaLoad_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_GAME_SAVED.jpg" Stretch="Uniform"/>
</Grid.Background>
<Image x:Name="imgBackSaved" HorizontalAlignment="Left" Height="215" Margin="478,76,0,-53" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/img_back.png"/>
<Button x:Name="btnBackSaved" Panel.ZIndex="100" HorizontalAlignment="Left" Height="58" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="547,149,0,0" Click="btnBackSaved_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Grid x:Name="areaNotAvailable" Panel.ZIndex="1011" HorizontalAlignment="Left" Height="245" Margin="11,-1114,0,0" VerticalAlignment="Top" Width="1340" IsVisibleChanged="areaLoad_IsVisibleChanged">
<Grid.Background>
<ImageBrush ImageSource="Resources/Images/Interface/Main Menu/img_NOT_AVAILABLE_YET.jpg" Stretch="Uniform"/>
</Grid.Background>
<Image x:Name="imgBackNotAvailable" HorizontalAlignment="Left" Height="215" Margin="478,76,0,-53" VerticalAlignment="Top" Width="383" Source="Resources/Images/Interface/Main Menu/img_back.png"/>
<Button x:Name="btnBackNotAvailable" Panel.ZIndex="100" HorizontalAlignment="Left" Height="58" VerticalAlignment="Top" Width="253" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" MouseEnter="btnInventory1_MouseEnter" MouseLeave="MouseLeaveAnyObject" Margin="547,149,0,0" Click="btnBackNotAvailable_Click">
<Button.Template>
<ControlTemplate>
<Image Source="Resources/Images/Interface/Blank.png" Stretch="Fill" Margin="12,0,6,0"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
<Label Content="0.7.1" HorizontalAlignment="Left" Height="46" Margin="1258,724,0,0" VerticalAlignment="Top" Width="53" FontSize="24" Foreground="#FFFBEEEE"/>
<Button x:Name="btnResolution" Content="Button" HorizontalAlignment="Left" Height="104" Margin="1040,644,0,0" VerticalAlignment="Top" Width="181" Click="btnResolution_Click"/>
</Grid>
Xaml at the start:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Name="wdwMain" x:Class="RealityIncognita.MainWindow"
Height="900" Width="1600" ResizeMode="NoResize" WindowState="Maximized" Cursor="Cross" WindowStyle="None" Loaded="wdwMain_Loaded">
<Grid x:Name="areaContainer" HorizontalAlignment="Left" Height="900" VerticalAlignment="Top" Width="1600">
How it looks now:
How it should look:
Thank you,
Evgenie

Just remove the HorizontalAlignment="Left" Height="600" VerticalAlignment="Top" Width="800" from your grid so that grid can stretch to the whole window,
if you need these values use it on the window itself
Edit:
Okay, I see that you're setting the height and width for each element(like the buttons) inside the grid , and you're setting the margin to move them to the correct place,
This will not work with different resolutions. lets say you set the window width to 800 and your button is set to be 200. if you change the window width to 1024, this change will not be reflected automatically to the buttons, it will always be 200 (and same goes for the margin)
The correct solution is to rewrite the xaml code in the correct way, (you will use Grids with Grid.ColumnsDefinition/RowDefinition, Stackpanels ..etc) without setting the values in pixels.
But if you're in hurry you can put all elements in a Viewbox:
<Window ....
<Viewbox Stretch="Fill">
<Grid x:Name="areaContainer" ....
</Grid>
</Viewbox>
</Window>
Now note that using viewbox will stretch your content based on the Viewbox's width and height (so its like what you did in the graphics editor).
Also note that Viewbox should be avoided as it's very expensive in terms of resources

Button with image - How to set the button size

I have a button on top of which I have put an image. How can I set the size of the button to be same as the size of the image? Please note I cannot use "Height" and "Width" property because my form is suppose to resize
<Button Grid.Column="1" Grid.Row="1" Click="Button_Click" >
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/WpfApplication5;component/myimage.png" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

Try this:
<Button Grid.Column="1" Grid.Row="1" Click="Button_Click" Width="{Binding ElementName=img,Path=Width}" Height="{Binding ElementName=img,Path=Height}">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image x:Name="img" Source="pack://application:,,,/WpfApplication5;component/myimage.png" Stretch="Uniform" VerticalAlignment="Top" HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
But, one suggestion: the button automatically resize with his content.

WPF Itemcontrol datatemplate

I'm new in WPF and I can not work this one out hope you guys could help on this. The problem is that the DesignerItemTemplate is not working when its in the item control, I have try to use this directly to one item I can drag it around. Forgive me if the code look messy. Thanks in advance
<UserControl.Resources>
<ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
<Rectangle Fill="Transparent" />
</ControlTemplate>
<!-- ResizeDecorator Template -->
<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
<Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" Height="15" Width="130" Margin="0,-15,-81,0" IsHitTestVisible="False">
<TextBox Text="R101" BorderBrush="Transparent" IsHitTestVisible="False" Background="Transparent" Height="17" FontSize="7" Foreground="#FF6DF90C" VerticalContentAlignment="Stretch" MinHeight="1" HorizontalAlignment="Stretch" CharacterCasing="Upper" />
</StackPanel>
<s:ResizeThumb Height="1" Cursor="SizeNS" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="1" Cursor="SizeWE" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="1" Cursor="SizeWE" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<s:ResizeThumb Height="1" Cursor="SizeNS" BorderBrush="#FF160DCD" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNWSE" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNESW" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Top" HorizontalAlignment="Right"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNESW" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="2" Height="2" Cursor="SizeNWSE" BorderBrush="#FF81F110" BorderThickness="1"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate" TargetType="{x:Type ContentControl}">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
<Control Template="{StaticResource ResizeDecoratorTemplate}"/>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<panZoom:PanAndZoomViewer x:Name="panZoomViewer" Margin="2,2,2,45" ClipToBounds="True">
<!--<Canvas>-->
<Canvas x:Name="cnvImage" Background="Transparent">
<Image x:Name="imgCurrent" VerticalAlignment="Center" HorizontalAlignment="Center" />
<ItemsControl ItemsSource="{Binding InspectionItemList,Mode=TwoWay }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl Canvas.Top="{Binding Y,Mode=TwoWay}" Canvas.Left="{Binding X,Mode=TwoWay }"
Width="{Binding Width,Mode=TwoWay}" MinWidth="1"
Height="{Binding Height,Mode=TwoWay}" MinHeight="1"
Template="{Binding Mode=OneWay, Source={StaticResource DesignerItemTemplate}}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
<!--</Canvas>-->
</panZoom:PanAndZoomViewer>

Instead of Template="{Binding Mode=OneWay, Source={StaticResource DesignerItemTemplate}}" /> try this:
Template="{StaticResource DesignerItemTemplate}" />
If this doesn't help, could you please provide a little simpler example which demonstrates the problem and describe what you want to achive. It's not clear to me what you want to achive.

I found the problem! It was the InspectionItemList collection object that inheriting to a observable object. when I removed the obeservable in the object it works perfectly. Thanks Clemens and Stackoverflow this site really helps me a lot.

XAML design: drawing a line from button to button

I am trying to learn XAML and am creating a simple app based off this:
I have created the buttons for each of the circles, but where I am running into an issue is the drawing of the lines and autosizing them to the button positions. I was wondering if there is a way to bind the start/end point of a path to a button location? Is there a better way doing this in XAML?
Here is what my current XAML code is...
<Page
x:Class="PennyGame.GameControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PennyGame"
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}">
<Button Width="100" Height="100" Margin="540,133,0,535" Name="Button_Top1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
<Path Data="M49,100 L48,401" Fill="Gold" Height="302" Stretch="Fill" Stroke="Gold" UseLayoutRounding="False" Width="2"/>
</Button>
<Button Width="100" Height="100" Margin="725,133,0,535" Name="Button_Top2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="725,534,0,134" Name="Button_Bottom2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="540,534,0,134" Name="Button_Bottom1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,244,0,424" Name="Button_Left1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="434,423,0,245" Name="Button_Left2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,244,0,424" Name="Button_Right1">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button Width="100" Height="100" Margin="831,423,0,245" Name="Button_Right2">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Stroke="White" StrokeThickness="5" />
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Path Data="M526,475 L826,475" Fill="White" Margin="534,0,539,292" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition" Height="10" />
<Path Data="M526,295 L826,295" Fill="White" Margin="534,294,538,0" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition" Height="2" />
<Path Data="M590,235 L590,535" Fill="White" Margin="590,233,0,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="2" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Left" />
<Path Data="M775,235 L775,535" Fill="White" Margin="0,233,590,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" Width="3" d:LayoutOverrides="TopPosition, BottomPosition" HorizontalAlignment="Right" />
<Path Data="M590,535 L826,295" Fill="White" Margin="590,294,539,238" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M775,535 L526,295" Fill="White" Margin="534,296,589,233" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M526,475 L775,235" Fill="White" Margin="534,233,589,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
<Path Data="M590,235 L826,475" Fill="White" Margin="590,233,540,291" Stretch="Uniform" Stroke="White" UseLayoutRounding="False" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
</Grid>

If you stick to handle it in XAML using grids you can use a canvas for each button-line-button constellation.
I'd recommend to handle it in code.
See my example bellow.
I bound actual Canvas properties to each button and the connector line.
It should properly if you resize the container grid, or reposition your canvas.
RESULT:
CODE:
<Grid Width="300" Height="300">
<Canvas x:Name="lineCanvas1">
<Line x:Name="line" Fill="Green" Stroke="Green" UseLayoutRounding="False" X1="1" Y1="1" X2="{Binding ActualWidth, ElementName=lineCanvas1}" Y2="{Binding ActualHeight, ElementName=lineCanvas1}" />
<Button x:Name="button1" Content="Button One" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Background="Red" RenderTransformOrigin="1,1" Height="100" Width="100"/>
<Button x:Name="button2" Content="Button Two" HorizontalAlignment="Stretch" Margin="-100,-100,0,0" VerticalAlignment="Stretch" Background="Red" Canvas.Left="{Binding ActualWidth, ElementName=lineCanvas1}" Canvas.Top="{Binding ActualHeight, ElementName=lineCanvas1}" RenderTransformOrigin="1,1" Height="100" Padding="0" Width="100"/>
</Canvas>
</Grid>

Categories

Resources