Develop Reference

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).

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>

Set button background

I made and circle as my button. But how I can change the image via code
<Button Style="{StaticResource myStyle}" Name="Prj_Button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="180" Height="180" Click="Prj_Button_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse>
<Ellipse.Fill>
<ImageBrush ImageSource="/Presentation Interface;component/Images/pic1.png"/>
</Ellipse.Fill>
</Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>

If you want to do it in code then you need to find ImageBrush via Button.Template and to do that first you'll need to give ImageBrush some name
<ImageBrush x:Name="imgBackground" ... />
and then in code you can use FindName
var ib = Prj_Button.Template.FindName("imgBackground", Prj_Button) as ImageBrush;
ib.ImageSource = new BitmapImage(...);
but Button must be already loaded at this point so you can do it for example in Window.Loaded event or somewhere later. It won't work if you do it in Window constructor for example
EDIT
However I would suggest to use TemplateBinding and bind Ellipse.Fill with Button.Background
<Button Name="Prj_Button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="180" Height="180">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
and then you can do in code
Prj_Button.Background = new ImageBrush(new BitmapImage(...));

How can I clip everything outside of a border in WPF?

I am trying to make a form with the top edges rounded in WPF. I have successfully done that part, although I have a canvas as a header on the form and the background image inside of it covers the rounded edges on my border. Is there a way to clip the edges from this canvas if it goes outside of the border? I tried sending the border to the back and set each element to clip although that does not work. If I set the border to the front then the border just sits on top. Can anyone offer some assistance?
Here is how I am creating the form with rounded corners-
<Border BorderBrush="Silver" BorderThickness="1" Height="645" HorizontalAlignment="Left" Name="mainBorder" VerticalAlignment="Top" Width="867" CornerRadius="10, 10, 0, 0" SnapsToDevicePixels="False" UseLayoutRounding="False" ClipToBounds="False" Background="{StaticResource FormGradient}">
<Canvas Height="43" Name="canvas1" Width="794" VerticalAlignment="Center" Margin="0,0,0,320">
<Canvas.Background>
<ImageBrush ImageSource="/WPFPROJECT;component/Images/canvas-nav-bar.png" Stretch="None" TileMode="Tile" Viewport="0,0,106,92" ViewportUnits="Absolute" />
</Canvas.Background>
<Rectangle Canvas.Left="-36.5" Canvas.Top="-25" Height="11" Name="headercanvasFooter" Stroke="{x:Null}" Width="867" Fill="White"></Rectangle>
</Canvas>
</Border>
<Canvas Height="118" HorizontalAlignment="Left" Name="headerCanvas" VerticalAlignment="Top" Width="867" ClipToBounds="True" DataContext="{Binding}" IsItemsHost="False">
<Canvas.Background>
<ImageBrush ImageSource="/WPFPROJECT;component/Images/Ps-HeaderSlice.png" Stretch="Fill" TileMode="Tile" Viewport="0,0,27,158" ViewportUnits="Absolute" />
</Canvas.Background>
<Image Canvas.Left="698" Canvas.Top="6" Height="64" Name="headerLogo" Stretch="None" Width="163" Source="/WPFPROJECT;component/Images/WPFPROJECTImage.png" HorizontalAlignment="Center" IsHitTestVisible="False" StretchDirection="Both" VerticalAlignment="Center" Visibility="Visible" SnapsToDevicePixels="False" UseLayoutRounding="True" IsManipulationEnabled="False" ClipToBounds="False" />
</Canvas>

You can use OpacityMask on your inner Canvas to make the edges appear transparent
<Border x:Name="border" CornerRadius="20" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
<Canvas Background="Red" Width="50" Height="50" Opacity="0.5">
<Canvas.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle Fill="Black" Stroke="Black" StrokeThickness="1" RadiusX="20" RadiusY="20"
Width="{Binding ActualWidth, ElementName=border}" Height="{Binding ActualHeight, ElementName=border}"/>
</VisualBrush.Visual>
</VisualBrush>
</Canvas.OpacityMask>
</Canvas>
</Border>

How to change height of slider control in windows phone?

It must be simple but I can't figure it out. How to change the height of slider control in windows phone? No matter how large value I set for Height it remains as it is
<Slider Width="100" Height="600" />

Open the page in Expression Blend
Right click on Slider Control on Page .
Select Edit Template and Select Edit Current/ Edit a copy as you wish.
Change width values in Scale sub tab of Render Tab for the properties HorizontalTrack, HorizontalFill,HorizontalThumb in Expression Blend
and you will see the difference.
Save the page and get back to Visual Studio and your custom template will be added to page resources.
I have attached the image for Expression Blend .
And the result will be like
Template code :- which might be of help for you.
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
<Style x:Key="SliderStyle1" TargetType="Slider">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid Background="Transparent">
<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleY="2.9"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<CompositeTransform ScaleY="2.9"/>
</Rectangle.RenderTransform>
</Rectangle>
<RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
<Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12" Margin="0,22,0,50" Width="12" RenderTransformOrigin="0.5,0.5">
<Thumb.RenderTransform>
<CompositeTransform ScaleY="4.65"/>
</Thumb.RenderTransform>
<Thumb.Template>
<ControlTemplate>
<Canvas Background="{StaticResource PhoneForegroundBrush}" Height="12" Width="12">
<Rectangle Fill="Transparent" Height="84" IsHitTestVisible="True" Canvas.Left="-24" Canvas.Top="-22" Width="60"/>
</Canvas>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And usage it in control like:-
<Slider Margin="0,49,56,348" HorizontalAlignment="Right" Width="360" Style="{StaticResource SliderStyle1}" />