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"/>
Related
I have this button and I put some text in it using Content="1", there's a 15px padding around the top and 20px on the left side of the number, however the text appears to go outside of the button when it is resized.
this is what it normally is
and this is what happens when it resizes
if it helps any, here is the XAML code:
<Button x:Name="_btn1" Content="1" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" Width="214" FontSize="24" HorizontalContentAlignment="Left" VerticalContentAlignment="Top" Height="182" Margin="10,10,10,10" Background="#33999999" Click="DayClick" Padding="20,15,0,0"/>
Your content is not going outside; some portion of the button is hiding behind the content holder like StackPanel, Grid or whatever you are using.
Here are something you can do -
Use button's auto size instead of hard code size.
<Button x:Name="_btn1"
Content="1"
FontSize="24"
Background="SeaGreen"
Margin="10,10,10,10"
Grid.Row="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
Use ScrollViwer outside of your container.
<ScrollViewer>
<StackPanel>
<Button x:Name="_btn1"
Content="1"
FontSize="24"
Background="SeaGreen"
Width="214"
Height="182"
Padding="20,15,0,0"
Margin="10,10,10,10"
Grid.Row="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
HorizontalContentAlignment="Left"
VerticalContentAlignment="Top"/>
</StackPanel>
</ScrollViewer>
You can't use ScrollViwer inside of a StackPanel
Use AdaptiveTrigger and change the buttons' properties as you need.
(Read the doc if you are not familiar - AdaptiveTrigger)
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>
I'm trying to set HorizontalAlignment and VerticalAlignment to Center so that the RelativePanel will be right in the middle of the UWP app. There are children items inside the RelativePanel, and the children are supposed to be centered inside the RelativePanel. It's supposed to look like:As you can see, the RelativePanel is in the middle, and the children are on top of each other and centered. I tried this XAML code:
<RelativePanel x:Name="relativePanel1" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="textBlock1" Text="Yo, waddup? Enter your GUID to continue" IsTextSelectionEnabled="True" FontFamily="Chiller" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBox x:Name="textBox1" AcceptsReturn="True" HorizontalAlignment="Center" InputScope="Text" PlaceholderText="{}{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}" RelativePanel.Below="textBlock1" VerticalAlignment="Center" />
</RelativePanel>
Here's how it looks like when debugging:
Am I doing something wrong in here? I'm using a RelativePanel instead of a StackPanel because I need the two children on top of each other.
Add RelativePanel.AlignHorizontalCenterWithPanel="True" to your TextBlock and TextBox.
<RelativePanel x:Name="relativePanel1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<TextBlock x:Name="textBlock1"
RelativePanel.AlignHorizontalCenterWithPanel="True"
Text="Yo, waddup? Enter your GUID to continue"
IsTextSelectionEnabled="True"
FontFamily="Chiller"
FontSize="72" />
<TextBox x:Name="textBox1"
RelativePanel.AlignHorizontalCenterWithPanel="True"
AcceptsReturn="True"
InputScope="Text"
PlaceholderText="{}{XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX}"
RelativePanel.Below="textBlock1" />
</RelativePanel>
There might be more than this though. Your RelativePanel clearly looks top-aligned to me. That means its parent panel is not stretched. Also, you don't have to use a RelativePanel here if centering is all it does. You can replace it with a StackPanel and manually set HorizontalAlignment="Center" on all its children.
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.
Expectation:
Before Clicked -> Once Clicked -> After Release
What is actually happening:
Before Clicked -> Once Clicked -> After Release
So the border of the button stays green till the user presses another button (the other button gets green). How can I override that behavior? And if I can't then I want to remove the whole green-border thingy. I couldn't do that through the properties. Border thickness is 0 and no border brush on this button. So how can I do that? Please and thanks
EDIT:
XAML
<Button x:Name="UpButton" Margin="0,5,5,0" Grid.Row="1" Grid.Column="1" PreviewMouseUp="UpButton_PreviewMouseUp" BorderThickness="0" >
<StackPanel Height = "90" >
<TextBlock x:Name="UpButtonText" Text="Up" FontSize="13" Width="18" Margin="0,2,0,4"/>
<Image x:Name="UpButtonImage" Width="55" Source="/EZ3D;component/Resources/loc_up.png" Height="58"/>
</StackPanel>
</Button>
Set the image back to the original when mouse exits dimensions of image.
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
Example requiring jQuery:
<Button x:Name="UpButton" Margin="0,5,5,0" Grid.Row="1" Grid.Column="1" PreviewMouseUp="UpButton_PreviewMouseUp" BorderThickness="0" >
<StackPanel Height = "90" >
<TextBlock x:Name="UpButtonText" Text="Up" FontSize="13" Width="18" Margin="0,2,0,4"/>
<Image x:Name="UpButtonImage" Width="55" Source="/EZ3D;component/Resources/loc_up.png" Height="58" onmouseout="javascript:$(\"[name^='UpButtonImage']\").attr(\"src\",\"/EZ3D;component/Resources/loc_up.png\");
});";"/>