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.
Related
I am trying to add filtering to my WPF app, so I figured that I want to have an ellipse, and inside it will be a TextBox whose Text will be bound to a FilterText property in my ViewModel.
What I have tried:
<TextBox
Width="30"
Height="30">
<TextBox.Template>
<ControlTemplate>
<Grid>
<Ellipse Stroke="Black" StrokeThickness="1" />
<ContentPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextElement.Foreground="Black" />
</Grid>
</ControlTemplate>
</TextBox.Template>
</TextBox>
I took this from the same example, but with Label.
This displays the ellipse, but no TextBox inside it.
How can I create an ellipse WITH a TextBox?
Try this
<Grid>
<Ellipse Stroke="Black" StrokeThickness="1"/>
<TextBox Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
Fixed it by wrapping the TextBox inside a Border and setting the Border's CornerRadius:
<Border
Width="30"
Height="30"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="30">
<TextBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="Transparent" //important to lose the TextBox look
BorderBrush="Transparent" //important to lose the TextBox look
BorderThickness="0" //important to lose the TextBox look
Text="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Border>
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>
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).
How to change txtPIN.Text value in C# code behind after UserControl was initialized.
Here is XAML
<Button x:Name="btn_pin" Content="Change PIN" Click="button_Click" Foreground="White">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/images/settings/lock.png" Stretch="UniformToFill" Width="16" Height="16"/>
<TextBlock x:Name="txtPin" Text="Change PIN" Foreground="White" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
and C#
public MyUserControl()
{
this.InitializeComponent();
this.btn_pin.??????????
}
You're not doing it the right way, just fix your xaml (I changed the Text binding of your TextBlock):
<Button x:Name="btn_pin" Content="Change PIN" Click="button_Click" Foreground="White">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Image Source="/Assets/images/settings/lock.png" Stretch="UniformToFill" Width="16" Height="16"/>
<TextBlock x:Name="txtPin" Text="{TemplateBinding Content}" Foreground="White" />
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
and every time you want to change the text, change the Content of the button like this:
public MainPage()
{
this.InitializeComponent();
btn_pin.Content = "New label";
}
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(...));