Mouseover effect on full stretch button - c#

I am using a WPF button mouse ovent to show a specific area in screen and i use the below xaml in code
http://pastebin.com/Rn0CVAHA.
If i remove the Background="Red" property of button control i have to click on exactly the center to show my area on screen .
The screen shot is
How can i make the button control in a way that it works without background color ,but stretch content effect ? Like clicking anywhere on the button area should show the content

I am guessing that this is the offending line in your code
<Border Name="border" Background="Red">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</Border>
The problem is, when you remove the background of the border there is no hittest on the border to react the mouse triggers (IsMouseOver in your case)
The trick is to set the background brush to transparent so that the background can be hit test and will respond to your triggers.
so try changing your Border to
<Border Name="border" Background="Transparent">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</Border>
You can read more about Hit testing on MSDN

Related

How to center Content in a Button Template and keep mouse events in empty area

I am using a Button Template to customize the look and feel of my buttons like so:
<ControlTemplate TargetType="Button">
<Border x:Name="Border" CornerRadius="6" BorderThickness="1">
<ContentPresenter Margin="3" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" ContentSource="Content"/>
</Border>
</ControlTemplate>
I want to center horizontally and vertically the Content, but when I do it the "empty" areas of the Button don't react to the Mouse. When I use Stretch the entire Button behaves alright, but the Content is aligned top-right.
How do I do both?
To make whole area of a Border hit test visible you need to initialise its Background property with some Brush. Can be even Transparent which will have same visual effect as default null.
<Border ... Background="Transparent" />

Scrollviewer panning position on touch

I have a scrollviewer in which I have 2 WrapPanels. I would like to know how I would go about getting the scroll viewer position once a user scrolled to the last end of the last panel. I am trying to show and hide an on screen arrow that indicates there is more content, but off to the right of the screen, but I would like to hide the button once they get to the end of the scroll viewer.
Can someone point me in the direction of what I would do in the code behind to get the horizontal offset position of the scrollviewer based on the panning. Mainly I want to get the far right position and hide the Arrow button when it gets to that point. My width for each Panel is currently 1920, so the window is currently 1920 width which hides the next panel in the Stack.
My XAML currently is below:
<ScrollViewer x:Name="scrVwrProductCategories" Style="{DynamicResource scrVwrFullWidthHorizontal}" PanningMode="HorizontalOnly" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled">
<StackPanel Width="Auto" Height="750" HorizontalAlignment="Right" Orientation="Horizontal">
<WrapPanel Style="{DynamicResource wrpPnlProductCategoriesPanels}" x:Name="wrpPnlProductCategories">
<!-- Constant currently for count of buttons per WrapPanel = 6-->
<!-- This is filled in dynamically at runtime
<controls:btnLarge Height="325" Width="500" Margin="20,0" TitleText="My Item" NoteText="" ShowNote="Collapsed" ShowSubTitle="Collapsed"/>
-->
</WrapPanel>
<WrapPanel Style="{DynamicResource wrpPnlProductCategoriesPanels}" x:Name="wrpPnlProductCategories2">
<!-- Constant currently for count of buttons per WrapPanel = 6-->
<!-- This is filled in dynamically at runtime
<controls:btnLarge Height="325" Width="500" Margin="20,0" TitleText="My Item" NoteText="" ShowNote="Collapsed" ShowSubTitle="Collapsed"/>
-->
</WrapPanel>
</StackPanel>
<Kiosk:SwipeForMoreArrow x:Name="ctrlSwipeForMoreArrow" HorizontalAlignment="Right" VerticalAlignment="Center" Visibility="Collapsed"/>
</ScrollViewer>
Do you aim to make this possible only through XAML? Otherwise you could try to get the this.HorizontalOffset of the Scrollviewer via the OnScrolledChanged Event to identify wether it´s 0 or max.
Maybe this link might help too:
How to find that ScrollViewer is scrolled to the end in WPF?

Position the Popup control in the screen and Textblock text center

I'm quite new in C# WPF. I want my Popup control to be positioned in a certain coordinates of the user's screen. and I want to make my textblock text center in the textblock itself. I tried to add a block but it doesn't work. Look at my XAML codes: (I'm 97% done in my personal project. :) )
Also, look at my screenshot, I put a red box there, I want my popup control to be there, although it is not my priority cause the original position is quite fine with me, but I would be glad if this will be moved.
Next, look at the annoying text, it is not centered.
The current position of the popup is in the left most and upper most part of my screen.
<Window x:Class="KeyLocks_Notifier.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">
<Grid>
<Popup Name="Popup1" AllowsTransparency="True" PlacementRectangle="0,0,30,50" Placement="Center"
PopupAnimation="Fade">
<Border BorderBrush="{x:Null}" Height="50">
<TextBlock Name="myPopupText"
Background="#FF9700FF"
Height = "40"
Width="180"
Foreground="White" FontWeight="Bold" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Effect>
<DropShadowEffect/>
</TextBlock.Effect>
</TextBlock>
</Border>
</Popup>
</Grid>
</Window>
On the window :
In XAML there is a WindowStartupLocation on the root level with 3 options (Manual, CenterScreen, CenterOwner)
If you want a custom Location on your screen you need to set WindowStartupLocation to Manual and set the Top & Left with pixel
For your popup :
You can set the Placement to custom
Example Here
And for your text position Here

WPF semi transparent button to control MediaElement

I am making WPF application that plays a video.
I use MediaElement, I wish to add Play/Pause button, I want that image button to be in shape of play, and only the image i put on the button will be shown. the rest to be transparent.
e.g: put a play triangle image on a rectangle button will only show the triangle image.
You're going to have to "make your own", fortunately it's not that hard, here is a working example (doesn't handle mouse hovering though):
<Grid Background="Black">
<Button HorizontalAlignment="Center" VerticalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="Button">
<StackPanel>
<ContentPresenter Content="{TemplateBinding Content}" />
</StackPanel>
</ControlTemplate>
</Button.Template>
<Path Data="M 0,0 L 15,10 L 0,20" Fill="Green"/>
</Button>
</Grid>
The grid is only here to show that only the arrow is actually drawn, and the Path thing is vectorial data to draw a Play button.
It looks like this:

How do I make the WPF TextBox border inside the ScrollViewer not disappear

in a WPF window I have a TextBox inside a ScrollViewer:
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" MaxHeight="160" Grid.Column="1" Grid.Row="0">
<TextBox MinHeight="80" Name="generalLog"/>
</ScrollViewer>
With an empty text it looks like this.
When the text gets to long or contains too many lines, the scrollbars appear, as they should. But as the TextBox is wrapped inside the ScrollViewer, the TextBox gets bigger and its border (default style) gets hidden on the sides:
Link to Screenshot because I can't embed pictures
As you can see, the border is not visible on the left side.
Is there any way to make the ScrollViewer appear inside the TextBox? Or make the ScrollViewer have a border like the TextBox and hide the TextBox one, which would probably look the way I want.
Thanks so much.
Wrap the Scrollviewer with a border and set Textbox borderbrush="transparent" ?
<Border>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" MaxHeight="160" Grid.Column="1" Grid.Row="0">
<TextBox BorderBrush="transparent" MinHeight="80" Name="generalLog"/>
</ScrollViewer>
</Border>

Categories

Resources