I want to Add an Icon and then Aside the Button text, But when I add the fontAwesome Icon the text disapears, here my Button WPF code:
<Button fa:Awesome.Content="Adjust" Content="My Text" Background="#23282D" Foreground="#F1F1F1" FontSize="16" HorizontalContentAlignment="Left" Padding="10" BorderThickness="0" Height="44" />
The Icon is here but the Text not, When I remove the Icon the text comes back again. I tried to play with Alignment and Searching here and on other Forums but can't figure out why this not work. Any ideas what I'm doing wrong?
The simplest way is to set the content of the button to a container (e.g. Grid or StackPanel) containing a TextBlock for the caption and an ImageAwesome control for the icon, setting the appropriate properties of each control as required.
<Button>
<StackPanel Orientation="Horizontal">
<fa:ImageAwesome Icon="Adjust" />
<TextBlock Text="My Text" />
</StackPanel>
</Button>
Related
I have a MahApps button as follows:
<Button Style="{StaticResource MahApps.Styles.Button.Chromeless}" Foreground="Blue" Content="{icon:Modern Kind=Add}"></Button>
I don't want it to have a transparency effect, but I don't know how to do it.
I tried to set the Foreground property and so on, but to no avail.
You can simply set the Background. The Foreground only affects the glyph or text content.
<Button Style="{StaticResource MahApps.Styles.Button.Chromeless}" Foreground="Blue" Background="Red" Content="{iconPacks:Modern Kind=Add}"/>
Alternatively, use any of the other Button styles that already have a background set.
<Button Style="{StaticResource MahApps.Styles.Button.Flat}" Foreground="Blue" Content="{iconPacks:Modern Kind=Add}"/>
<Button Style="{StaticResource MahApps.Styles.Button.Square}" Foreground="Blue" Content="{iconPacks:Modern Kind=Add}"/>
I used materialDesign:PackIkon in my WPF application.
this is my code at xaml for the PackIcon
<ListViewItem Background="White" Height="55" >
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="CardMembership" MouseDown="PackIconMember_MouseDown" Height="40" Width="25" Foreground="#FF0959A8" />
<Button x:Name="btnMember" Click="btnMember_Click" Content="Member" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Black" FontSize="10" />
</StackPanel>
</ListViewItem>
I have a few PackIcon in my xaml. each of them in different listview.
what I want is when user click on the Icon it will process the event in PackIconMember_MouseDown
There is no error in my code above, the problem is sometimes the code work. I means when user click on the icon it will process the event. but sometimes user need to click multiple time for it to process the event. I don't know why this happen.
Any idea on what I should do with this ? or any suggestion to replace the MouseDown event.
its only work when I click on icon with the blue color.
it does not working when I click on the white space that I show with the arrow. how can I do to make it work when user click anywhere on the icon ? is it possible ?
if I do inside button, the packIcon does not appear
<Button Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Black" Height="20" Width="25" Margin="10">
<materialDesign:PackIcon MouseDown="PackIconMember_MouseDown" TouchDown="PackIconMember_MouseDown" Kind="CardMembership" />
</Button>
Set the Background property of the PackIcon to Transparent:
<materialDesign:PackIcon Kind="CardMembership" MouseDown="PackIconMember_MouseDown" Height="40" Width="25" Foreground="#FF0959A8"
Background="Transparent" />
This should capture the clicks also on the "empty" parts of the icon.
Make The Icon as Part of the Button Like:
<Button x:Name="btnMember" Click="btnMember_Click" Content="Member" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Black" FontSize="10" >
<materialDesign:PackIcon Kind="CardMembership" Height="40" Width="25" Foreground="#FF0959A8" />
</Button
But you have to set the margin
I have the following:
<Button Name = "openFile" Content="Open File" HorizontalAlignment="Center" Margin="100,0,100,18" VerticalAlignment="Bottom" Click="openFile_Click"/>
<ScrollViewer>
<TextBlock Name="errMessage" TextWrapping="WrapWithOverflow" Margin="100, 100, 100, 100" HorizontalAlignment ="Center" VerticalAlignment="Center" RenderTransformOrigin="-5.314,2.792" Visibility="Visible" />
</ScrollViewer>
This breaks my button, making it unclickable. However, if I remove the scrollviewer tag, button functionality returns.
I have a TextBlock that is meant display error information. Sometimes this can grow beyond the borders of the application and I wanted to make it scrollable. How can I do that?
If you define the button after the ScrollViewer you will be able to click it. When the ScrollViewer is defined last you won't be able to click anything that is under it in the window.
If you add a Background color to your ScrollViewer you would realize that your button disappears from the window since it's behind the ScrollViewer.
<ScrollViewer>
<TextBlock Name="errMessage" TextWrapping="WrapWithOverflow" Margin="100, 100, 100, 100" HorizontalAlignment ="Center" VerticalAlignment="Center" RenderTransformOrigin="-5.314,2.792" Visibility="Visible" />
</ScrollViewer>
<Button Name = "openFile" Content="Open File" HorizontalAlignment="Center" Margin="100,0,100,18" VerticalAlignment="Bottom" Click="openFile_Click"/>
I somewhat of a WPF noob and am using a DockPanel to display the text content of an email in a TextBox in a ScrollViewer. The panel has a button bar and area for the email headers at the top, a button bar at the bottom, a panel at the right and the email itself should fill the remaining space dynamically:
[Banner at top, below which is a button bar and box with email headers. At the bottom is another full width button bar. The space between them is divided into a fixed-width panel at the right and a large text box for the email contents.]
http://rowlandsoftware.com/Screenshots/LongEmail.png
(The DockPanel sits inside a grid that provides the bit at the very top and is used when the email is not visible.)
The problem is that if the email is too short or too narrow, the textbox fails to fill the remaining width. In this screenshot, you can see some of the underlying stuff between the box and the panel:
[Between the text box and the panel is a column that is not filled. Part of what lies under it can be seen.]
http://rowlandsoftware.com/Screenshots/TooNarrow.png
The XAML is:
<DockPanel x:Name="EmailCanvas" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Visibility="Collapsed" Height="Auto">
<DockPanel x:Name="topButtonBar" DockPanel.Dock="Top" Height="50" Background="White">
<Button x:Name="btnReturn" DockPanel.Dock="Left" Content="Return to List" Click="btnReturn_Click" />
<Image Width="15" Source="Images/transparent.png" />
<Button x:Name="btnTextToggle" Content="Plain text" Click="btnTextToggle_Click" />
<Button x:Name="btnZoomOut" Content="Zoom Out" />
<Button x:Name="btnZoomIn" Content="Zoom In" />
<Image Width="150" DockPanel.Dock="Right" Source="Images/transparent.png" />
<Button x:Name="btnPrint" DockPanel.Dock="Right" Content="Print" Width="100"/>
<Image DockPanel.Dock="Right" Source="Images/transparent.png" />
</DockPanel>
<StackPanel x:Name="EmailHeaders" Orientation="Horizontal" DockPanel.Dock="Top" Width="Auto" Background="Linen">
<StackPanel Orientation="Vertical">
<TextBlock Text="Subject:" FontSize="16" />
<TextBlock Text="Time Sent:" FontSize="16"/>
<TextBlock Text="Other Recipients: " FontSize="16"/>
</StackPanel>
<StackPanel Orientation="Vertical">
<TextBlock x:Name="labSubject" Text="Subject:" FontSize="16" />
<TextBlock x:Name="labDateTime" Text="Sent:" FontSize="16"/>
<TextBlock x:Name="labSpare" Text="Other Recipients:" FontSize="14"/>
</StackPanel>
</StackPanel>
<DockPanel x:Name="bottomButtonBar" DockPanel.Dock="Bottom" Height="80" >
<Image Width="150" DockPanel.Dock="Left" Source="Images/transparent.png" />
<Button x:Name="btnDelete" DockPanel.Dock="Left" Content="Delete" />
<Image Width="150" Source="Images/transparent.png" />
<Button x:Name="btnSave" Content="Save" />
<Image Width="150" Source="Images/transparent.png" />
<Button x:Name="btnReply" Content="Reply" />
<Image Width="150" DockPanel.Dock="Right" Source="Images/transparent.png" />
</DockPanel>
<StackPanel DockPanel.Dock="Right" Orientation="Vertical" Background="White" Width="150">
<Button x:Name="btnAttachments" Content="Attachment"/>
</StackPanel>
<ScrollViewer x:Name="eTextViewer" VerticalScrollBarVisibility="Auto" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<TextBox x:Name="eText" Background="White" HorizontalAlignment="Stretch" TextWrapping="Wrap" FontFamily="Verdana" FontSize="18" IsReadOnly="True" />
</ScrollViewer>
<!--Image Width="Auto" Height="Auto" DockPanel.Dock="Bottom" Source="Images/white.png" /-->
<WebBrowser x:Name="eHTML" Height="Auto" DockPanel.Dock="Top" Visibility="Collapsed" />
</DockPanel>
The box is extended only to fill the available height, not the width. The documentation for the DockPanel.LastChildFill Property says,
If you set the LastChildFill property to true, which is the default setting, the
last child element of a DockPanel always fills the remaining space, regardless
of any other dock value that you set on the last child element.
msdn.microsoft.com/en-us/library/system.windows.controls.dockpanel.lastchildfill%28v=vs.110%29.aspx
That does not appear to be the case: in my program it is only filling height, not width. LastFillChild=true is the default, but explicitly setting it to True or False doesn't make a blind bit of difference.
Interestingly, if you set DockPanel.Dock="Top" on the ScrollViewer, it fills the available width but not the height, leaving some of the underlying stuff showing between the text box and the bottom button bar. Again this is contrary to the documentation which says that the dock value set on the last child element is ignored.
Setting HorizontalAlignment="Stretch" to both the ScrollViewer and the TextBox and HorizontalContentAlignment="Stretch" to the ScrollViewer makes not a jot of difference.
So my question is, how can I ensure that the textbox fills the available space in the DockPanel even when the contents of the email are too short?
UPDATE: I have just noticed that if I remove the WebBrowser that is set initially to Visibility="Collapsed", then it works fine. I guess that its presence fools the DockPanel into regarding it as the LastChild even though it is Collapsed.
However, I need to toggle between displaying the email in the web browser and the text box, so removing it isn't an option. Both need to be treated as last child when they are visible. Any ideas?
UPDATE 2: So I wrap the scrollviewer and the web browser in another container, e.g. grid, which is the Last Child. Then I can toggle between the the two but they both fill the space.
Thanks guys. I wouldn't have got there without humiliating myself in public ;)
DockPanel will work, but beware of Collapsed items. Although the documentation says that a collapsed item has no effect on layout, with DockPanel it does if it is the LastChild.
The solution in my case was to add another container as the last child, and place the two items that I wanted to toggle between in that container. Then both will fill the remaining space in the panel.
Hello and thanks for the help. I have a Treeview that I am populating with a Hierarchical data template, and currently the bottom nodes have a tooltip that generates a small stack panel that is populated with data specific to the item the mouse hovers over. I also have a button sitting in the tooltip, however, as the tooltip does not persist when the mouse moves over it, I am unable to make use of the button like I need to. My xaml looks like this:
<!--=========================== Hierarchical Data template for tree view -->
<!--template for bottom nodes-->
<sdk:HierarchicalDataTemplate x:Key="ModTemplate" ItemsSource="{Binding ApplicationModules}">
<StackPanel Orientation="Horizontal" > <!--======tooltip style to handle format for callout window============-->
<ToolTipService.ToolTip>
<ToolTip HorizontalOffset="0" VerticalOffset="0" Style="{StaticResource ModuleToolTipStyle}">
<StackPanel Width="150" Height="auto" >
<TextBlock Text="Module Info" FontWeight="Bold" TextAlignment="Center"/>
<TextBlock Text="Module State:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleState}" />
<TextBlock Text="Module Start Time:" FontWeight="Bold" />
<TextBlock Text="{Binding Path=ModInfo.ModuleStartTime}"/>
<TextBlock Text="Module Down Time:" FontWeight="Bold"/>
<TextBlock Text="{Binding Path=ModInfo.ModuleDownTime}" />
<Button Content="More Info" Width="75"></Button>
</StackPanel>
</ToolTip>
</ToolTipService.ToolTip>
<!--============end tooltip style for callout window===================-->
<ContentPresenter Margin="0 0 4 0" Content="{Binding Icon}" />
<TextBlock FontStyle="Italic" Text="{Binding Path=ModuleName}" />
</StackPanel>
</sdk:HierarchicalDataTemplate>
I would like the tooltip to persist when the mouse moves over it so that I can wire an event to the button. How can I achieve this? Thanks again for the help.
You have a couple options to accomplish your goal that I'm aware of. You can go check out the Silverlight Advanced Tooltips project over on codeplex which does what you want (though I personally have not used it so can't give any kind of review.)
Or you can make your own with some creativity. If it were me I would probably skip all that mess, forget the ToolTipService all together and just make my own to dress it up since to a user, what you're providing isn't what they're used to in terms of a tooltip expectation anyway and have cross more over to a callout or popout functionality. I can make an example as soon as I get some freed up time if option #1 doesn't work for you but I hope it does. Essentially both my way, and that project link I provided would do the same thing, which is provide a delay after the MouseLeave event of what it's attached to so the user can get to it before it disappears. Then hand off its visibility condition to that object. Let me know if this doesnt work and I can give you an alternative example using nothing but XAML.