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
Related
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
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\");
});";"/>
I am trying to build Windows-10(UWP) app. My app has 4 buttons which appear at the bottom of the screen.
Button1, 2 & 4 are in their intended position. I want to place Button3 in between Button2 & Button4. How can I achieve that with RelativePanel in UWP?
My xaml code snippet for Button3 is
<Button Name="BtnTextSearchLaunch" Content="Text Search" RelativePanel.AlignVerticalCenterWith="Button2" Width="60" Background="#FF291313" Height="30" RelativePanel.RightOf="Button2" >
<Button.Template>
<ControlTemplate>
<Image Source="/Assets/textSearch#2x.png"/>
</ControlTemplate>
</Button.Template>
</Button>
I can place Button3 in the required position by specifying the position as in Margin="a,b,c,d", but that doesnt work well if I run the app on mobile. Hence I want to achieve this with RelativePanel, since that would scale the UI dynamically & give me the ability to deploy my app on Local Machine as well as Mobile.
<Grid HorizontalAlignment="Stretch" >
<RelativePanel VerticalAlignment="Center" HorizontalAlignment="Stretch" >
<Button x:Name="btn1" Content="btn1" RelativePanel.AlignLeftWithPanel="True" HorizontalAlignment="Left" />
<Button x:Name="btn2" Content="btn2" RelativePanel.AlignHorizontalCenterWithPanel="True" HorizontalAlignment="Center" />
<Button x:Name="btn3" Content="btn3" RelativePanel.RightOf="btn2" RelativePanel.LeftOf="btn4" HorizontalAlignment="Center" />
<Button x:Name="btn4" Content="btn4" RelativePanel.AlignRightWithPanel="True" HorizontalAlignment="Right" />
</RelativePanel>
</Grid>
As you can see from the solution you just need to make sure you place the button relative to both the btn2 and btn4 and don't forget to specify HorizontalAlignment="Center".
In a windows 8.1 project i have the following button with a flyout.
<Button x:Name="FilterCompanyMeetings2" Foreground="White" Content="Company Meetings" Margin="15,58,0,0" Height="40" VerticalAlignment="Top" Style="{StaticResource ButtonStyle2}">
<Button.Flyout>
<Flyout>
<StackPanel Width="406">
<TextBlock Text="Insert the value and tap the Send button:" FontSize="16"
FontWeight="SemiLight" FontFamily="Segoe UI"
Margin="0,0,0,10" />
<TextBox x:Name="ValueTextBox" />
<Button Content="Send" HorizontalAlignment="Right"
FontSize="16" Margin="0,10,0,0" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
Im having a issue when i press the button, the flyout appears as expected but all other buttons change their background to a gray color and some of them change their foreground to black.
I dont use this button for anything at the moment, but when i press it that happens.
Why does it change style of other button on the page?
I have a bunch (currently) HyperlinkButtons on my main web page. I want to have 2 versions for the image of each button: selected and unselected. This way when the users enters a page the corresponding button will change to the "selected" image.
Here is an image of what I want to accomplish:
This seems to me like something trivial, but so far I have been running into a stone wall.
I would prefer to do everything from the XAML (but I will be grateful for any solution).
Here is a little of my XAML:
<ScrollViewer x:Name="NavScrollViewer" Margin="-5,12,5,-12" ScrollViewer.VerticalScrollBarVisibility="Visible" IsEnabled="True"
Style="{StaticResource ContentViewerStyle}">
<StackPanel x:Name="ToolboxPanel" Orientation="Vertical" d:LayoutOverrides="Width" Height="Auto">
<HyperlinkButton x:Name="DashboardButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/Dashboard"
Height="50"
/>
<TextBlock Text="Dashboard" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ConfigurationButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/CRSConfiguration"
Height="50"
/>
<TextBlock Text="Configuration" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ScanEnginestionButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/ScanEngines"
Height="50"
/>...
You need to have a toggle button and set its IsChecked property to toggle among its visual states. You may go through this post Using Toggle Button