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).
Related
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>
I wish to display a ToolTip for an entry in a Listbox.
The Toolkit will contain a Textbox and a copy (larger) of the Image in the entry in the Listbox
I can get either the Text in the Textbox Or the Image to display.
The code which displays the image but not the text is
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="#EEFFFFFF" BorderBrush="#FFCCCCCC"
HorizontalAlignment="Center" VerticalAlignment="Center"
BorderThickness="1">
<Grid>
<StackPanel Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Image x:Name="img" ToolTipService.Placement="Top"
Source="{Binding Path=ImageUri}" Height="64" Stretch="Uniform" Width="64">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" x:Name="scaleTrans"/>
</TransformGroup>
</Image.RenderTransform>
<Image.ToolTip>
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center" Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
</Image.ToolTip>
</Image>
</StackPanel>
</Grid>
</Border>
</ControlTemplate>
This code is part of the code for which is used by a ListBox
The code below (as in the list above display the Image in the tooltip but not the Textbox
<ToolTip BorderBrush="{x:Null}" Background="{x:Null}" Effect="{x:Null}"
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}"
HasDropShadow="False">
<Border Background="{x:Null}" VerticalAlignment="Center"Margin="0" Width="600"
HorizontalAlignment="Center">
<Grid Background="{x:Null}">
<StackPanel >
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=FTitle}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=Source}"/>
</Border>
</StackPanel>
</Grid>
</Border>
</ToolTip>
If you remove
DataContext="{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}}" from <ToolTip
The Text works as expected but the Image now fails (as expected)
I have tried to
a) modify the original so the TextBlock binding point to the FTitle entry observable Collection driving the listbox entries
<TextBlock Margin="5" Padding="5" FontSize="14" FontWeight="Bold"
Text="{Binding Path=DataContext.FTitle, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
Background="{DynamicResource {x:Static SystemColors.InactiveBorderBrushKey}}"/>
b) moved the datacontext in to Image
<Border Margin="8,0,8,12.5" VerticalAlignment="top">
<Image Source="{Binding Path=DataContext.Source, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Image}}}"/>
</Border>enter code here
Neither worked. (I did try many variations But none worked.
I would be grateful for either solution
{Binding Path=PlacementTarget, RelativeSource={x:Static RelativeSource.Self}} will bind the UIElement (a ListBoxItem) as the DataContext for the tooltip. It seems you want the DataContext of the ListBoxItem in order to bind to properties of the underlying model. In which case, try changing your DataContext binding to be: {Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}
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.
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}" />
I would show over a mediaelement, a classic image play and when the pointer enter on the mediaelement this image disappears.
The mediaelement is like this and this works well. I post a portion of code:
<toolkit:DataGrid.RowDetailsTemplate>
<DataTemplate x:Name="DataTemplateDgRows">
<Border HorizontalAlignment="Stretch" CornerRadius="5" Background="Black" Margin="5" Padding="5">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="#509CD5" FontSize="20" Width="300" TextWrapping="Wrap" Text="{Binding NomeV}"/>
<Border BorderThickness="2" CornerRadius="2" BorderBrush="LightGray" >
<MediaElement Source="{Binding MediaUri}"
LoadedBehavior="Manual" Name="mediaElement1" ScrubbingEnabled="True"
Width="360" MouseLeftButtonDown="mediaElement1_MouseLeftButtonDown"
MouseEnter="mediaElement1_MouseEnter"
MouseLeave="mediaElement1_MouseLeave"
Loaded="mediaElement1_Loaded" />
</Border>
May someone can help me?
thanks
Something like this will get you started.
<toolkit:DataGrid.RowDetailsTemplate>
<DataTemplate x:Name="DataTemplateDgRows">
<Border HorizontalAlignment="Stretch" CornerRadius="5" Background="Black" Margin="5" Padding="5">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="#509CD5" FontSize="20" Width="300" TextWrapping="Wrap" Text="{Binding NomeV}"/>
<Border BorderThickness="2" CornerRadius="2" BorderBrush="LightGray" >
<Grid>
<Image Grid.ZIndex="1"
x:Name="image1"
Source="YourSource"/>
<MediaElement Grid.ZIndex="0"
Source="{Binding MediaUri}"
LoadedBehavior="Manual" Name="mediaElement1" ScrubbingEnabled="True"
Width="360" MouseLeftButtonDown="mediaElement1_MouseLeftButtonDown"
MouseEnter="mediaElement1_MouseEnter"
MouseLeave="mediaElement1_MouseLeave"
Loaded="mediaElement1_Loaded" />
</Grid>
</Border>
</StackPanel>
</Border>
<DataTemplate.Triggers>
<Trigger SourceName="mediaElement1" Property="IsMouseOver" Value="True">
<Setter TargetName="image1" Property="Visibility" Value="Collapsed"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</DataGrid.RowDetailsTemplate>