So I have a circular button I have created in wpf like so:
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate>
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
But the button it displays is:
Why has the red X not appeared in the center of my button? and is it possible to change my xaml such that the red X will appear.
(ps. the grey background is because of my button style in my resources)
It's because there's nothing in your Template to display that Content. For that you need to use ContentPresenter
<Button Grid.Column="3" Width="25" Height="25" Content="X" Margin="10,5,5,5" Foreground="Red" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Name="Ellipse" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
you'll also need to add TargetType="{x:Type Button}" to ControlTemplate
Related
it's my first question here so be gentle haha
I am using a WPF TextBox Element to enter some user information, in this example it's a username.
My problem with this is that I am able to scroll within the TextBox which I don't want, as it just looks terrible even if it is just a bit.
So I am looking for an option to turn the scrolling off. As you can see I am using a ScrollViewer, as the documentation suggests but if there are any other options for styling the TextBox I am more then willing to try :D
Thanks in advance.
<Style TargetType="{x:Type TextBox}"
x:Key="textBox1">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border CornerRadius="16"
Background="{TemplateBinding Background}">
<ScrollViewer Margin="10,7.5"
x:Name="PART_ContentHost"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
=> This is the Style of the TextBox in a RessourceDic.
<StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Grid Height="250"/>
<TextBlock x:Name="Error"
FontSize="14"
Foreground="DarkRed"
FontWeight="Bold"
Margin="5"
TextWrapping="Wrap"/>
<TextBlock Text="Benutzername" Margin="15,0,0,10" FontSize="20"/>
<TextBox Margin="0,0,20,0"
Background="#F2E3D5"
x:Name="Username"
Style="{StaticResource textBox1}"
Width="230"
Height="35"
FontSize="21">
</TextBox>
<TextBlock Text="Passwort" Margin="15,20,0,10" FontSize="20"/>
<PasswordBox Margin="0,0,20,0"
Background="#F2E3D5"
x:Name="Password"
Style="{StaticResource passwordBox1}"
FontSize="21">
</PasswordBox>
<Button x:Name="LogIn" Height="40" Width="120" Style="{StaticResource LogInBTN}" Foreground="Black" Margin="0,30,0,0" Click="LogInBTN_Click">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="images/user.png" Height="25" Width="25" VerticalAlignment="Center"/>
<TextBlock Text="Einloggen" Margin="10,2,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
</Button>
<TextBlock Margin="0,20,0,0" Height="20" Width="250" Text="X - Passwort nicht korrekt" TextAlignment="Center" FontSize="16" Foreground="Red" Visibility="Hidden"/>
</StackPanel>
=> This is the Stackpanel where I use the TextBox.
as workaround, without overriding ScrollViewer:
<TextBox Height="30" Width="50">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Decorator x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
I want to create a button having image and label as content in the bottom and notification image on the Upper right corner as in the WhatsApp whenever there is notification.
I can work with Notification logic but can't able to display the image properly as shown in the figure.
I tried with canvas and grid but not able to do that.Any help will be appreciated.I also tried using dock panel and stack panel but was unable to achieve the same.
<Button Name="JobViewer" Tag="JobsIcon" Style="{DynamicResource ButtonAppStyle}" Margin="5" Click="UpdateAction" ToolTip="{Binding RelativeSource={RelativeSource Self }, Path=Name}" >
<Button.Content>
<DockPanel>
<Image DockPanel.ZIndex="2" Source="{StaticResource ContainerZoomWarningLightIcon}" DockPanel.Dock="Top" MaxHeight="40" MaxWidth="40" HorizontalAlignment="Right" ></Image>
<Label Content="JobViewer" DockPanel.Dock="Bottom"></Label>
<Image DockPanel.ZIndex="1" Source="{StaticResource JobsIcon}" ></Image>
</DockPanel>
</Button.Content>
</Button>
the image i get
the image i want
You could specify the <Button> content to give yourself the layout you want.
<Button Width="70" Height="70" Background="Transparent">
<Button.Content>
<Canvas Background="Black">
<Border CornerRadius="8" Height="50" Width="50" Canvas.Left="-25" Canvas.Top="-25"
BorderThickness="0" BorderBrush="Black" Background="#FF47B137">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
<Border CornerRadius="20" Width="20" Height="20" Canvas.Left="10" Canvas.Top="-30"
BorderBrush="White" BorderThickness="2" Background="#FFE40814">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
</Canvas>
</Button.Content>
</Button>
I have a ToggleButton defined like:
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked" >
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
However, I just want the button to be an image, not an image on a button. If I was using a normal Button I would just do something like Style="{DynamicResource NoChromeButton}" in the opening ToggleButton tag. But this does not work.
How can I mimic the whole NoChromeButton thing in a ToggleButton?
EDIT: Editted to include how I do it with regular Buttons:
<Button Style="{DynamicResource NoChromeButton}" Height="17" Margin="0,0,30,0" Name="btnMinimize" VerticalAlignment="Top" Grid.Column="1" Click="btnMinimize_Click" HorizontalAlignment="Right" Width="27" Padding="0" Visibility="Visible">
<Image Source="/some_image.png" Stretch="None" />
</Button>
Just copy/paste this into new WPF project.
<Window x:Class="SOChromeButton.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="Chromeless" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border BorderThickness="0" Width="54" Height="54">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Style="{StaticResource Chromeless}" Name="tbPinned" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10,0,0,0" IsChecked="True" >
<Image Source="C:\Temp\info.png"></Image>
</ToggleButton>
</Grid> </Window>
Will this do?
<ToggleButton Name="tbPinned" Grid.Row="0" Grid.Column="3" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="1,0,0,-5" Height="30" Width="30" IsChecked="True" Checked="tbPinned_Checked" Unchecked="tbPinned_Unchecked"
BorderThickness="0" Background="Transparent">
<Image Source="/some_image.png" Stretch="Fill" />
</ToggleButton>
I am a XAML newbie and was looking at this blog
http://jeremybytes.blogspot.com/2009/03/wpf-xaml-sample.html
He mentions "Notice that they do not have any content (Button1a, Button1b, etc.). This is because our template does not contain an element for the Content." I am looking to figure out how ensure the content remains even after the new button template is applied. Here is the XAML
<Page.Resources>
<ControlTemplate TargetType="Button" x:Key="targetButton">
<Canvas Width="100" Height="100" Name="mainCanvas">
<Rectangle Height="100" Width="100" Fill="Aqua" Canvas.Top="1"/>
</Canvas>
</ControlTemplate>
<Style TargetType="Button">
<Setter Property="Margin" Value="5, 5, 5, 5"/>
<Setter Property="Template" Value="{StaticResource targetButton}"/>
</Style>
</Page.Resources>
<StackPanel DataContext="{Binding Board}">
<StackPanel Orientation="Horizontal">
<Button Name="testButton1a" Click="testButton1a_Click" Content="testButton1a"/>
<Button Name="testButton1b" Click="testButton1a_Click" Content="testButton1b"/>
<Button Name="testButton1c" Click="testButton1a_Click" Content="testButton1c"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="testButton2a" Click="testButton1a_Click" Content="testButton2a"/>
<Button x:Name="testButton2b" Click="testButton1a_Click" Content="testButton2b"/>
<Button x:Name="testButton2c" Click="testButton1a_Click" Content="testButton2c"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="testButton3a" Click="testButton1a_Click" Content="testButton3a"/>
<Button Name="testButton3b" Click="testButton1a_Click" Content="testButton3b"/>
<Button Name="testButton3c" Click="testButton1a_Click" Content="testButton3c"/>
</StackPanel>
</StackPanel>
I have tried to add a TextBlock in the template but I see the same textblock overlayed across all buttons. All I want is to render testButton* content displayed on the rectangle button matrix so I can change the content once clicked.
Thanks, any help will be appreciated
You can use the ContentPresenter to display the content:
<ControlTemplate TargetType="Button" x:Key="targetButton">
<Canvas Width="100" Height="100" Name="mainCanvas">
<Rectangle Height="100" Width="100" Fill="Aqua" Canvas.Top="1"/>
<ContentPresenter/>
</Canvas>
</ControlTemplate>
How do I create a circle shape button but with the color affected by binding.
I have already something like this:
<Button Command="{Binding ShowDetails}" Background="{Binding Color} />
and the color that will be received will be of this format, for example: Colors.LightGray
Can anyone help me?
If you google for "circular button template silverlight" you will find lots of blog posts that describe this process. Including previous StackOverflow questions:
Silverlight: Creating a round button template
The basic steps are
Create a new ControlTemplate for your buttons that renders a circle, using an Ellipse for example.
If you want your Buttton.Background to set the Fill color, then use a TemplateBinding for the Ellipse.Fill property.
For example:
<Button Content="MyButton">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
You will have to write the control template for the button like this
<Button Content="MyButton">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="{TemplateBinding Background}"/>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
With the color binding :
<UserControl.Resources>
<Color x:Key="MyColor">LightGray</Color>
<Style x:Key="RoundButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Width="40" Height="40" Stroke="#FF000000" StrokeThickness="1" Canvas.Left="141" Canvas.Top="61">
<Ellipse.Fill>
<SolidColorBrush Color="{StaticResource MyColor}" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Button Style="{StaticResource RoundButton}" />
</Grid>
Enjoy ;)