If I had any hair left, I would have pulled it out by now. I'm getting better with WPF but I'm still running into odd issues like this one.
EDIT: It has to do with the transparent background between objects in the custom control. On a whim, I set the background on the top stackpanel to black and the control now works; I can move the mouse freely around without losing the buttons. However, I'd really like to have the transparent background in the control...
I've got a usercontrol that consists of 4 buttons, a textblock, and a stand alone image. This is my XAML for the control:
<Border BorderBrush="Transparent" MouseEnter="StackPanel_MouseEnter" MouseLeave="StackPanel_MouseLeave">
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal" Height="25" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Button Name="btnAdd" HorizontalAlignment="Center" Background="Transparent" HorizontalContentAlignment="Left" ToolTip="Previous" Click="btnAdd_Click"
BorderBrush="Transparent" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Source="/Images/add.png" VerticalAlignment="Center" HorizontalAlignment="Center" Name="imgAdd" Width="25" Height="25"></Image>
<TextBlock Background="Transparent" Foreground="AntiqueWhite" VerticalAlignment="Center" Width="25">Add</TextBlock>
</StackPanel>
</Button>
<Button Name="btnEdit" HorizontalAlignment="Center" Background="Transparent" HorizontalContentAlignment="Left" ToolTip="Previous"
Click="btnAdd_Click" BorderBrush="Transparent" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Source="/Images/edit.png" VerticalAlignment="Center" HorizontalAlignment="Center" Name="imgEdit" Width="25" Height="25"></Image>
<TextBlock Background="Transparent" Foreground="AntiqueWhite" VerticalAlignment="Center" Width="25">Edit</TextBlock>
</StackPanel>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" Height="30" >
<Button Name="btnPrevious" HorizontalAlignment="Left" Background="Transparent" HorizontalContentAlignment="Left" ToolTip="Previous" Click="btnPrevious_Click" BorderBrush="Transparent" >
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Source="/Images/Previous25px.png" VerticalAlignment="Center" HorizontalAlignment="Center" Name="imgPrevious" Width="25" Height="25"></Image>
</StackPanel>
</Button>
<TextBlock Name="tblkUserType" Background="Transparent" Foreground="AntiqueWhite" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" >Usertype</TextBlock>
<Button Name="btnNext" HorizontalAlignment="Left" Background="Transparent" HorizontalContentAlignment="Left" ToolTip="Previous" Click="btnNext_Click" BorderBrush="Transparent">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Source="/Images/Next25px.png" VerticalAlignment="Center" HorizontalAlignment="Center" Name="imgNext" Width="25" Height="25"></Image>
</StackPanel>
</Button>
</StackPanel>
<Image Source="/Images/Logo50px.png" Height="50" Width="50" ></Image>
</StackPanel>
</Border>
I added in the border to test this out further, previously I had the MouseEnter and MouseLeave events on the top .
The code behind the MouseEnter and MouseLeave are as follows:
private void StackPanel_MouseEnter(object sender, MouseEventArgs e)
{
btnNext.Visibility = Visibility.Visible;
btnPrevious.Visibility = Visibility.Visible;
btnAdd.Visibility = Visibility.Visible;
btnEdit.Visibility = Visibility.Visible;
//Debug.WriteLine("mouseEnter");
}
private void StackPanel_MouseLeave(object sender, MouseEventArgs e)
{
btnNext.Visibility = Visibility.Hidden;
btnPrevious.Visibility = Visibility.Hidden;
btnAdd.Visibility = Visibility.Hidden;
btnEdit.Visibility = Visibility.Hidden;
//Debug.WriteLine("mouseLeave");
}
What is supposed to happen when I hover over the control I want the buttons to pop up / appear.
What happens is that the 4 buttons do appear when I hover over the custom control and when I navigate to the "btnNext" or "btnPrevious" the control stays "open".
If I move my cursor up to "btnAdd" or "btnEdit" about half the way up the buttons disappear because the MouseLeave event is fired. However, all of these objects are under the same stackpanel which contains the MouseEnter and MouseLeave.
I can get to the buttons if I go to btnNext or btnPrevious then move the mouse diagonal to either btnAdd or btnEdit. But I can't go from the tblkUserType straight up.
I was trying to fix an original issue where 1/2 way to the upper buttons and the buttons would flicker on / off. That was "fixed" when I added in height="25" here:
<StackPanel Orientation="Horizontal" Height="25" >
But then I could at least continue up and make it to the buttons but it was painful to watch with all the flickering.
I don't know why this is happening or what to even search on to find anyone with the same issue...
I need to be able to get to the btnAdd and btnEdit from the tblkUserType. I guess I'm assuming incorrectly that everything within the StackPanel (or border) would operate with the MouseEnter and MouseLeave within that coverage but I'm not understanding something.
I found this on SO finally after discovering that transparent backgrounds seem to be affecting the StackPanel. This is what fixed it for me.
WPF Button Background Transparency on Mouse Over
Related
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 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 think my title is a bit confusing so let me explain my question in detail.
I have a StackPanel with multiple Grids inside it. It basicly looks like a table with a "Header Grid" and a "Content Grid" below. The StackPanel itself is inside a ScrollViewer.
Whenever the user clicks on the "Header Grid" the corresponding "Content Grid" should be collapsed and visible vice versa.
Here is a short version of my table:
<ScrollViewer Margin="0,0,0,10">
<StackPanel>
<Grid x:Name="Header_Grid1" Height="24" Background="#BF101820" VerticalAlignment="Top" Margin="34,0,0,0" Cursor="Hand" >
<Label Content="Click me to show/hide Content_Grid1" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid1" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
<Grid x:Name="Header_Grid2" Height="24" Background="#BF101820" Width="1001" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0">
<Label Content="Click me to show/hide Content_Grid2" Padding="5,0" VerticalContentAlignment="Center" Margin="5,0,0,0" Grid.ColumnSpan="2" Width="982"/>
</Grid>
<Grid x:Name="Content_Grid2" Height="100" Width="967" HorizontalAlignment="Right" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5">
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,0,719,75"/>
<Label Content="some content" Foreground="#FF918F82" Padding="5,0" VerticalContentAlignment="Center" Margin="0,25,719,50"/>
</Grid>
</StackPanel>
</ScrollViewer >
Lets say the user clicks on "Header_Grid1" the "Content_Grid1" hides with an kinda "flow to the top" animation by reducing its size. Thats no problem at all - the thing is I´d like the "Header_Grid2" aswell as the "Content_Grid2" to flow to the top while the animation of hiding "Content_Grid1" is playing. "Header_Grid2" and "Content_Grid2" should not just pop to the place where "Content_Grid1" has been. It should rather happen in a smooth animation.
Hopefully someone understands what I mean. It´s pretty hard to explain...
Thanks
As far as I am aware you can't animate the collapsed method, but there are various tricks to get around that such as animating the opacity, size, location etc...
I have a listbox with objects but I cannot scroll to the bottom of the page. What is the problem? This is the code that I'm using.
<Grid>
<Image Name="Nietcomment" Source="write.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup" Visibility="Visible"/>
<Image Name="welcomment" Source="write2.png" Width="70" Margin="350,-850,0,0" Tap="Login_popup_remove" Visibility="Collapsed"/>
<ScrollViewer Name="scrollview" VerticalScrollBarVisibility="Visible" Margin="0,0,0,0" Foreground="Black">
<StackPanel>
<TextBlock x:Name="NTitelComment" Text="{Binding}" TextWrapping="Wrap" FontSize="25" Margin="10,0,10,0" Foreground="#FFE5001b"/>
<Line Stretch="Fill" Stroke="Black" X1="0" X2="1" Y1="0" Y2="0" Margin="10,0,10,0"/>
<TextBlock x:Name="tijdComment" Text="{Binding}" Margin="50,0,10,0" Foreground="Black"/>
<Image Height="20" Width="20" Margin="-380,-20,0,0" Source="/PostDateIcon.png"/>
<ListBox Margin="0,0,0,20" Name="lbComments" VerticalAlignment="Top" />
</StackPanel>
</ScrollViewer>
</Grid>
If you put a border around your ScrollViewer, can you see if it goes outside of the screen maybe? Will it help to set a fixed height of the Grid or ScrollViewer?
Keep in mind the phone has built in scroll, so your ScrollViewer maybe doesn't play well with it.
With so much fixed margins, your layout will be impossible to manage, especially when dealing with differents screen resolutions and especially with negative margins.
Anyway, right now, you have two scrollviewers, as your listbox contains one as well.
You should disable the listbox scrollviewer or it will prevent your page to scroll.
Just change your listbox:
<ListBox
Margin="0,0,0,20"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
Name="lbComments"
VerticalAlignment="Top" />
It will disable it's scrollviewer and allow it to scroll with the rest of the page.
I am trying to create buttons for a 10-foot GUI using WPF. Each button requires a little more data than just a single text string and an image, maybe 2-3 strings located in different positions and some imagery.
I have tried
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch">
<TextBlock Name="textBloczk2" Text="ABC" TextAlignment="Left" DockPanel.Dock="Left"/>
<TextBlock Name="textBlxock1" Text="CDE" TextAlignment="Right" DockPanel.Dock="Right"/>
</DockPanel>
</Button.Content>
</Button>
But no matter which inner container I use, the button seems to disregard the layout from the DockPanel and the combined text ends up in the middle of the button. Am I doing something wrong or should I be using a different outer container ?
The problem seems to be that the DockPanel's width is so small that the Right and Left panels are the same width as your TextBlocks.
This seems to work as expected (setting the width of the DockPanel):
<Button Height="52" HorizontalAlignment="Stretch" Name="button1" Width="407">
<Button.Content>
<DockPanel LastChildFill="True" Width="300">
<TextBlock Name="textBloczk1" Text="Left" DockPanel.Dock="Left" />
<TextBlock Name="textBlxock2" Text="Right" DockPanel.Dock="Right" />
<TextBlock Name="textBlxock3" Text="Top" DockPanel.Dock="Top" />
<TextBlock Name="textBlxock4" Text="Bottom" DockPanel.Dock="Bottom" />
</DockPanel>
</Button.Content>
</Button>
Try to add "HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" to your button. This way dockpanel will occupy all space inside the button.