I`ve created big button which contains grid as below:
<Button Height="Auto" Width="Auto" Command="{Binding ContinueWithoutScan}" BorderThickness="0">
<Button.Template>
<ControlTemplate>
<Grid >
<TextBlock HorizontalAlignment="Center"
TextWrapping="Wrap" Text="Text"
VerticalAlignment="Center" FontWeight="DemiBold"
Height="Auto" Width="Auto"
FontSize="25" Foreground="White"/>
<materialDesign:PackIcon Height="Auto" Width="70" Kind="ChevronRight" Foreground="White"
VerticalAlignment="Center" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
There is problem that only TextBlock inside Template is clickable. Does anyone know how do I make whole content clickable? I working with MVVM so I dont want make Grid.OnMouseEneter.
Is there option to do that of I have to use EventTriggers?
The Grid needs to have a Background other than the default null to receive input events. You may set a transparent background instead of null:
<Grid Background="Transparent">
...
</Grid>
Related
I'm getting such error
The name 'ScoreBtn' does not exist in the current context
and
The name 'LvlBttn' does not exist in the current context
on c# side but I can get text of Label x:Name="Lines". Where is mistake and how can I fix it?
Thanks for any help,
</Window.Resources>
<DockPanel LastChildFill="false">
<Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
<StackPanel DockPanel.Dock="Right" Width="311" >
<Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
<Button x:Name="Score" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label x:Name="ScoreBtn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8" Content="Score"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="level" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label Content="Level 1" x:Name="LvlBttn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Label Visibility="Hidden" Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
This will get you the Label for the button named Score. "ScoreBtn"is the name of the label element. It's not as complicated as I thought it would be.
var label = (Label)Score.Template.FindName("ScoreBtn", Score);
You really ought to listen to Peter Duniho, write a viewmodel, and bind the label's Content property to a viewmodel property, but if you don't already have a viewmodel, you may not want to rewrite your entire project. Since you don't have a single Binding in your XAML, I imagine that might be the case.
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I'm trying to implement a template for my TextBox which displays at the right of the TextBox a little Image like it can be achieved inside ValidationTemplates:
<ControlTemplate x:Key="TextBoxTemplate">
<DockPanel>
<Grid x:Name="image" DockPanel.Dock="Right" Margin="3,0,0,0" Width="20" Height="20">
<Ellipse Width="20" Height="20" Fill="Red" />
<TextBlock Text="!" VerticalAlignment="Top" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="16" TextAlignment="Center" Margin="7,-1" />
</Grid>
<AdornedElementPlaceholder />
</DockPanel>
</ControlTemplate>
But when I try to bind the TextBox.Template Property to this StaticResource:
<TextBox Template="{StaticResource TextBoxTemplate}" Text="Test">
it does not show the TextBox itself.
I found a workaround for this by placing another TextBox inside the ControlTemplate instead of the AdornedElementPlaceholder and Binding the different values (Text, Style etc.) to the TemplatedParent:
<ControlTemplate x:Key="TextBoxTemplate">
<DockPanel DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<Grid x:Name="image" DockPanel.Dock="Right" Margin="3,0,0,0" Width="20" Height="20">
<Ellipse Width="20" Height="20" Fill="Red" />
<TextBlock Text="!" VerticalAlignment="Top" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" FontSize="16" TextAlignment="Center" Margin="7,-1" />
</Grid>
<TextBox Text="{Binding Text}" Style="{Binding Style}" Width="{Binding Width}" Height="{Binding Height}" />
</DockPanel>
</ControlTemplate>
But this is a rather ugly approach because you have to bind each Property explicitly.
Is there another easier way?
How is the AdornedElementPlaceholder in ValidationTemplate done? Couldn't I use it for my ContentTemplate?
Cheers,
Ialokim
Your mistake is what AdornedElementPlaceholder is used in conjunction with Validation.ErrorTemplate. In this case it will take original control and put it in a place of AdornedElementPlaceholder.
If you use Template, then nothing will automatically take original control, you should define complete template.
I'd recommend to create a normal UserControl if you want to simply combine several controls into one, way simpler than to deal with complete templates.
I'm working on a control for my WPF application in which I want a Button inside of a TextBox. The Button will contain an image that changes with a mouseover, but I already know how to do that part. What I'm having trouble with is actually including the Button in the TextBox so that it only takes up as much space as the image and is transparent. Below is the markup that I've tried so far:
XAML:
<Grid>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" Margin="5, 5, 10, 5" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="Transparent" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<Button.Content>
<Image Source="Image.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Button.Content>
</Button>
</Grid>
I've followed along with this question: How to implement a textbox with a clear button in wpf?, which also linked to this article: WPF Search Text Box. The XAML suggested in the question didn't work, which I think is because of the Style they use, which I don't have access to. The article provided too much information, mostly talking about the triggers and dependency properties needed in order to swap out searching and deleting icons on mouseovers. So, I'm asking for help finding a simple solution on how to make this happen. Thank you!
EDIT: I've followed the advice of the answers, and I'm able to style the button correctly, but it won't show up in the textbox still, and if it does, the text still runs underneath it. I've included the XAML and a picture of what's happening:
XAML:
<Grid Margin="5, 5, 10, 5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView" HorizontalAlignment="Right" Width="200" FontSize="16" KeyUp="SearchBoxKeyDown" Text="{Binding SearchText, Mode=TwoWay}" Grid.Column="0"/>
<Button Background="{Binding Backgound, ElementName=SearchBoxView}" HorizontalAlignment="Right" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Click="SearchBoxViewButtonClick" Grid.Column="1">
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Image.png" Width="12" Height="12"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
Image:
Specify Button template, instead of content
<Button>
<Button.Template>
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
EDIT
BTW, in your case the image will cover TextBox and entered text. I would recommend to put this controls in the different columns of the grid like bellow
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="SearchBoxView"
HorizontalAlignment="Right"
Width="200" Margin="5, 5, 10, 5"
FontSize="16"
KeyUp="SearchBoxKeyDown"
Text="{Binding SearchText, Mode=TwoWay}"
Grid.Column="0"/>
<Button
Grid.Column="1"
Background="Transparent"
HorizontalAlignment="Right"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<ControlTemplate>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image Source="pack://application:,,,/Organizr;component/DataLayer/Images/ActiveDeleteIcon.png"
Width="16"
Height="16"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
I'm trying to display a modal dialog with a spinning icon to indicate something happening in the background.
I'm using a Popup for the dialog and I've built a UserControl for the content.
The Popup displays fine, but the background is transparent. The content appears as expected. Ideally, I would like a black background with a white border on the popup.
Here is my UserControl:
<StackPanel VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"></Image>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"></Button>
</StackPanel>
</StackPanel>
I don't see you defining a background or a border in your xaml. If you want a background and border, you must specify one. I would also recommend doing an "overlay" instead of a popup. An overlay allows you to disable the rest of the page.
<Grid x:Name="Overlay" Visibility="Collapsed">
<Grid Background="{StaticResource PhoneBackgroundBrush}" Opacity=".6"/>
<Border VerticalAlignment="Center" BorderThickness="2"
Background="{StaticResource PhoneBackgroundBrush}" BorderBrush="{StaticResource PhoneForegroundBrush}"
CornerRadius="5" Visibility="Visible" Margin="12">
<StackPanel VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"/>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"/>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"/>
</StackPanel>
</StackPanel>
</Border>
</Grid>
Show the overlay by setting it's visibility
Overlay.Visibility = Visibility.Visible;
You're not adding a Border or a Background to your StackPanel.
Something like this should work. Depending on your application, you may just want to use real colors, rather than those based on device theme.
<Border BorderThickness="2" BorderBrush="{StaticResource PhoneContrastForegroundBrush}">
<StackPanel Background="{StaticResource PhoneChromeBrush}" VerticalAlignment="Center">
<Image Name="WaitImage" Source="/Resources/Images/Wait/70px/Loader-01.png" Stretch="None"></Image>
<StackPanel Name="MessPanel" Visibility="Collapsed">
<TextBlock Name="MessText" Foreground="White" TextAlignment="Center" TextWrapping="Wrap"></TextBlock>
<Button Name="MessBtn" Content="OK" Click="MessBtn_Click" Width="150"></Button>
</StackPanel>
</StackPanel>
</Border>