I am trying to set the progress bar visibilty in the button click, where both are inside the data template. I can't set the name for the progress bar and sent the visibility, since it is in a template.
Is there any method to achieve this. Following code is what I have tried.
<DataTemplate>
<Grid>
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
You can do this
private void Image_Download(object sender, RoutedEventArgs e) {
Button button = sender as Button;
if (button != null) {
Grid grid = button.Parent as Grid;
if (grid != null) {
ProgressBar progressBar = grid.Children.OfType<ProgressBar>().FirstOrDefault();
if (progressBar != null) {
progressBar.Visibility = Visibility.Hidden;
}
}
}
}
Related
I want to change the background of StackPanel when clicking TextBlock.
enter image description here
now background is bule! I want to change it!
<TreeView Name="tvView" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="0">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Path=ChildNodes}">
<Grid VerticalAlignment="Top" Margin="0">
<StackPanel Orientation="Horizontal" d:LayoutOverrides="Height">
<TextBlock Name="ConfidenceLevelReminderText" Text="！" FontWeight="Bold" HorizontalAlignment="Center" Foreground="#FF0000" Width="{Binding Path=ConfidenceLevelWidth}" Margin="0,0,0,0"></TextBlock>
<TextBlock TextWrapping="Wrap"
Padding="0,3,0,3"
Text="{Binding Path=Name}"
ToolTip="{Binding Path=NameToolTip}"
Tag="{Binding Path=TagInfo}"
MouseLeftButtonDown="name_MouseLeftButtonDown"
FontSize="14"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Foreground="#FF666666"
Margin="0"
Width="{Binding Path=TextWidth}"
Cursor="Hand"/>
<Button x:Name="btnIngnore" Width="{Binding Path=IgnoreWidth}" Click="btn_ignore_Click" Tag="{Binding Path=NodeId}" Margin="0" BorderThickness="0" Background="{x:Null}" Style="{StaticResource ButtonStyle32}" IsEnabled="{Binding Path=IgnoreWidth,Converter={StaticResource itb}}" Cursor="Hand">
<TextBlock Text="xxxx" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0" FontSize="12" Foreground="#FF666666"/>
</Button>
</StackPanel>
</Grid>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
If you want
to change the background of StackPanel when clicking TextBlock.
You can add EventSetter to the TextBlock's Style and handle event in the event handler.
<TextBlock Text="...">
<TextBlock.Style>
<Style TargetType="TextBlock">
<EventSetter Event="MouseDown" Handler="Mouse_LBtnDown"/>
</Style>
</TextBlock.Style>
</TextBlock>
private void Mouse_LBtnDown(object sender, MouseButtonEventArgs e)
{
StackPanel stp = null;
var visParent = VisualTreeHelper.GetParent(sender as FrameworkElement);
while (stp == null && visParent != null)
{
stp = visParent as StackPanel;
visParent = VisualTreeHelper.GetParent(visParent);
}
if (stp == null) { return; }
stp.Background = Brushes.Coral;
}
For make it reusable and adjustable you could make a behavior from the event handler.
If you don't want what you have asked, then rethink your question and ask new one.
I am creating a custom window style in WPF. So far, I have been able to accomplish something that almost works, in pure XAML.
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<DockPanel LastChildFill="True">
<Border Height="40" Padding="5" DockPanel.Dock="Top" BorderBrush="#7FA0A0A0"
BorderThickness="0,0,0,1">
<Grid WindowChrome.IsHitTestVisibleInChrome="True">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Source="Resources/Logo/f-dark.png" />
<TextBlock Margin="0,0,0,0" Text="{TemplateBinding Title}" VerticalAlignment="Center"
FontSize="16" Foreground="#AF000000"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
WindowChrome.IsHitTestVisibleInChrome="True" Background="Transparent">
<Button Width="{x:Static SystemParameters.WindowCaptionButtonWidth}"
Command="{x:Static SystemCommands.MinimizeWindowCommand}"
Style="{StaticResource LinkButton}"
WindowChrome.IsHitTestVisibleInChrome="True"
IsEnabled="True">
<TextBlock Style="{StaticResource Icon}" FontSize="18"></TextBlock>
</Button>
<Button Width="{x:Static SystemParameters.WindowCaptionButtonWidth}"
Command="{x:Static SystemCommands.RestoreWindowCommand}"
Style="{StaticResource LinkButton}"
WindowChrome.IsHitTestVisibleInChrome="True"
IsEnabled="True">
<TextBlock Style="{StaticResource Icon}" FontSize="18"></TextBlock>
</Button>
<Button Width="{x:Static SystemParameters.WindowCaptionButtonWidth}"
Command="{x:Static SystemCommands.CloseWindowCommand}"
Style="{StaticResource LinkButton}"
WindowChrome.IsHitTestVisibleInChrome="True"
IsEnabled="True">
<TextBlock Style="{StaticResource Icon}" FontSize="18"></TextBlock>
</Button>
</StackPanel>
</Grid>
</Border>
<Border>
<ContentPresenter/>
</Border>
</DockPanel>
</Border>
</ControlTemplate>
However, the in the window chrome buttons do not highlight or change the cursor (and buttons with the same style behave as intended). Clicking on them has no effect. Why is this? How do I get the buttons to be interactive?
When I first open the window, I get something like this:
I would also like to be able to fix the black border, but my main problem is the fact that the caption buttons are noninteractive.
I have solved both problems. It turns out that the SystemCommands do not have implementations, and instead are just RoutedCommands. (why did they do that?)
So, I made an attached property that sets the CommandBindings for each window that I apply this style to.
public class Helper
{
public static bool GetUseWindowCommandBindings(DependencyObject obj)
{
return (bool)obj.GetValue(UseWindowCommandBindingsProperty);
}
public static void SetUseWindowCommandBindings(DependencyObject obj, bool value)
{
obj.SetValue(UseWindowCommandBindingsProperty, value);
}
public static readonly DependencyProperty UseWindowCommandBindingsProperty =
DependencyProperty.RegisterAttached("UseWindowCommandBindings", typeof(bool), typeof(Helper), new PropertyMetadata(false, UseWindowCommandBindingsChanged));
private static void UseWindowCommandBindingsChanged(DependencyObject d, DependencyPropertyChangedEventArgs dpce)
{
if (d is Window w && dpce.NewValue is bool b && b)
{
w.CommandBindings.Add(
new CommandBinding(
SystemCommands.MinimizeWindowCommand,
(s, e) => SystemCommands.MinimizeWindow(w),
(s, e) => e.CanExecute = true
));
w.CommandBindings.Add(
new CommandBinding(
SystemCommands.RestoreWindowCommand,
(s, e) => SystemCommands.RestoreWindow(w),
(s, e) => e.CanExecute = true
));
w.CommandBindings.Add(
new CommandBinding(
SystemCommands.MaximizeWindowCommand,
(s, e) => SystemCommands.MaximizeWindow(w),
(s, e) => e.CanExecute = true
));
w.CommandBindings.Add(
new CommandBinding(
SystemCommands.CloseWindowCommand,
(s, e) => SystemCommands.CloseWindow(w),
(s, e) => e.CanExecute = true
));
}
}
}
I had to put the attachment of the CommandBindings in the property-change handler since WPF calls SetValue() directly. Now, in my style, I added the line:
<Setter Property="view:Helper.UseWindowCommandBindings" Value="True" />
Now the buttons work as expected. To fix the black border, I set the width of the outermost Border in my template to {TemplateBinding Width}. But this creates the problem of having a massive, all-around black border if I maximize the window:
enter code hereHi I am using a Flyout in my UWP App. On a button click I am showing list of items in flyout. when I click the button the flyout is getting opened.
But here I want to open flyout when the list is not empty. If the list is empty I want to hide the flyout.
For this I have written the code but hiding is not working.
Can Any one has idea about this.
xaml code:
<Button TabIndex="4" Background="#212121" Name="btnCashPay" Click="btnCashPay_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="#212121" BorderThickness="0" Margin="0,-5,0,0" >
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Images/pay_bill(30_30).png" Stretch="None"/>
<Button.Flyout>
<Flyout x:Name="flyout" FlyoutPresenterStyle="{StaticResource Flyoutstyle}">
<StackPanel>
<TextBlock Grid.Row="0" Height="35" HorizontalAlignment="Center" Foreground="DarkTurquoise" FontWeight="SemiBold">Please Add Free Items To Cart </TextBlock>
<Border x:Name="dgFreeItemsug" BorderThickness="0.5" Visibility="Visible" BorderBrush="LightSlateGray" Grid.Row="1" Background="White" Height="200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="10,-16,5,0">
<ScrollViewer x:Name="svFreeItemSugg" HorizontalScrollBarVisibility="Hidden" Padding="0" VerticalScrollBarVisibility="Auto" VerticalAlignment="Top" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="0" Margin="0,0,0,0">
<controls:DataGrid x:Name="dgFreeItem" Height="200" HorizontalAlignment="Stretch"
controls:DataGridExtensions.UseSingleSelectionAndDeselection="true" VerticalAlignment="Top" RowBackgroundEvenBrush="White" RowBackgroundOddBrush="White" Margin="0,0,0,0" Navigate="dgFreeItem_Navigate">
<controls:DataGrid.Columns>
<controls:DataGridTextColumn x:Name="freeitemddesc" Width="1*" Binding="{Binding DealSku}">
</controls:DataGridTextColumn>
<controls:DataGridTextColumn x:Name="freeitemprice" Width="2*" Binding="{Binding DealDescription}">
</controls:DataGridTextColumn>
</controls:DataGrid.Columns>
</controls:DataGrid>
</ScrollViewer>
</Border>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
xaml.cs code:
private void btnCardPay_Tapped(object sender, RoutedEventArgs e)
{
txtcardmessage.Text = string.Empty;
media.Play();
if (objfreeitemlist == null)
btnCardPay.Flyout.Hide();
}
You can define your Flyout as a Button Resource
<Button x:Name="MyButton" Content="Button" Tapped="Button_Tapped" >
<Button.Resources>
<Flyout x:Name="MyFlyout">
....
</Flyout>
</Button.Resources>
</Button>
This way you have to open the Flyout yourself, but you can define when to open it.
private void Button_Tapped(object sender, TappedRoutedEventArgs e)
{
var button = sender as Button;
if (button != null && objfreeitemlist != null)
{
MyFlyout.ShowAt(button);
}
}
I have a page containing two StackPanels, each containing one TextBox and one Button:
<StackPanel x:Name="Row1">
<TextBox x:Name="TextBox1" Text="" GotFocus="OnFocusHandler" LostFocus="OffFocusHandler"/>
<Button x:Name="Button1" Content="Convert" Click="OnClickHandler" Visibility="Collapsed"/>
</StackPanel>
<StackPanel x:Name="Row2">
<TextBox x:Name="TextBox2" Text="" GotFocus="OnFocusHandler" LostFocus="OffFocusHandler"/>
<Button x:Name="Button2" Content="Convert" Click="OnClickHandler" Visibility="Collapsed"/>
</StackPanel>
I would like to do the following:
When a textbox has focus, the other textbox must be hidden and the corresponding button must show
When a textbox is out of focus, we are back to the original display: only empty textboxes are visible
I don't want the button to be able to trigger the OffFocusHandler
This is the current code that I have for the three handlers:
private void OnFocusHandler(object sender, RoutedEventArgs e)
{
TextBox SenderTextBox = (TextBox)sender;
if (SenderPanel.Name == "TextBox1")
{
Button1.Visibility = Visibility.Visible;
}
else if (SenderPanel.Name == "TextBox2")
{
Button2.Visibility = Visibility.Visible;
}
}
private void OffFocusHandler(object sender, RoutedEventArgs e)
{
TextBox1.Text = "";
TextBox2.Text = "";
Button1.Visibility = Visibility.Collapsed;
Button2.Visibility = Visibility.Collapsed;
}
private void OnClickHandler(object sender, RoutedEventArgs e)
{
// some stuff unrelated to my issue
}
How do I avoid the button clicking to trigger the OffFocusHandler code?
Is there another way to code this? I'm a complete beginner so I may not think the right way.
You can just Bind to the TextBox.IsFocused property in Xaml, and use the BooleanToVisibilityConverter to show/hide the button.
Example:
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication4"
Title="MainWindow" Height="300" Width="400" Name="UI" >
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BoolTovisible" />
</Window.Resources>
<Grid>
<StackPanel x:Name="Row1" Height="54" VerticalAlignment="Top">
<TextBox x:Name="TextBox1" Text="" />
<Button x:Name="Button1" Content="Convert" Visibility="{Binding ElementName=TextBox1, Path=IsFocused, Converter={StaticResource BoolTovisible}}"/>
</StackPanel>
<StackPanel x:Name="Row2" Margin="0,60,0,0" Height="51" VerticalAlignment="Top">
<TextBox x:Name="TextBox2" Text="" />
<Button x:Name="Button2" Content="Convert" Visibility="{Binding ElementName=TextBox2, Path=IsFocused, Converter={StaticResource BoolTovisible}}"/>
</StackPanel>
</Grid>
</Window>
for each element, there is a Visibility tag, it is "Visible" by default but you can assign "Hidden" or "Collapsed" as follow:
<RadioButton Margin="20,118,318,-43" GroupName="MCSites" Visibility="Hidden">
Radio Button Description
</RadioButton>
<Grid x:Name="LayoutRoot">
<Button x:Name="btn_num" Width="51" Margin="318.849,158,262.15,0" Height="45" VerticalAlignment="Top" d:LayoutOverrides="HorizontalMargin">
<Grid Height="38.166" Width="44.833">
<Label x:Name="lbl_2" Content="2" Margin="4.483,-2.042,7,-1.626" FontSize="11.333"/>
<Label x:Name="lbl_1" Content="1" Margin="4.483,0,7,-19.251" FontSize="11.333" Height="41.834" VerticalAlignment="Bottom"/>
<Label x:Name="lbl_3" Content="3" Margin="0,8.083,-15,-11.751" FontSize="11.333" HorizontalAlignment="Right" Width="33.35" Foreground="Black"/>
</Grid>
</Button>
<Button x:Name="btn_a" Content="A" HorizontalAlignment="Left" Margin="225.333,158,0,0" Width="55" Foreground="Black" Height="45" VerticalAlignment="Top" Click="btn_alt_Click" />
</Grid>
It's design will be like this
public partial class button : Window
{
static int _AClick = 0;
public button()
{
this.InitializeComponent();
}
private void btn_alt_Click(object sender, RoutedEventArgs e)
{
if (_AClick == 0)
{
_AClick = 1;
Fill();
}
else
{
btn_num.Content = "";
_AClick = 0;
}
}
public void Fill()
{
btn_num.Content = "3";
}
}
The result after window loaded
If i click A button first time. The result will be like this
If I click A button second time. The result will be like this
when I click A button second time. I need the result like below. what should I do for that.
There are a lot of ways available in WPF to achieve this. One way to do this is to have two ControlTemplates (one having all three numbers and other having just one number) and then set the template of your button in code -
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<ControlTemplate
x:Key="threeNumberTemplate"
TargetType="{x:Type Button}">
<Grid Height="38.166" Width="44.833">
<Label x:Name="lbl_2" Content="2" Margin="4.483,-2.042,7,-1.626" FontSize="11.333"/>
<Label x:Name="lbl_1" Content="1" Margin="4.483,0,7,-19.251" FontSize="11.333" Height="41.834" VerticalAlignment="Bottom"/>
<Label x:Name="lbl_3" Content="3" Margin="0,8.083,-15,-11.751" FontSize="11.333" HorizontalAlignment="Right" Width="33.35" Foreground="Black"/>
</Grid>
</ControlTemplate>
<ControlTemplate
x:Key="oneNumberTemplate"
TargetType="{x:Type Button}">
<Label x:Name="lbl_3" Content="3" FontSize="11.333"/>
</ControlTemplate>
</Grid.Resources>
<Button x:Name="btn_num" Width="51" Margin="318.849,158,262.15,0" Height="45" VerticalAlignment="Top" Template="{StaticResource threeNumberTemplate}"></Button>
<Button x:Name="btn_a" Content="A" HorizontalAlignment="Left" Margin="225.333,158,0,0" Width="55" Foreground="Black" Height="45" VerticalAlignment="Top" Click="btn_alt_Click" />
</Grid>
Code behind -
private void btn_alt_Click(object sender, RoutedEventArgs e)
{
if (_AClick == 0)
{
_AClick = 1;
btn_num.Template = FindResource("oneNumberTemplate") as ControlTemplate;
}
else
{
btn_num.Template = FindResource("threeNumberTemplate") as ControlTemplate;
_AClick = 0;
}
}
Same can be achieved through triggers by making _AClick as DependecyProperty and using it's value to swap templates in triggers.
Another approach is to have two Buttons and hide/show them based on the _AClick value in code.
You can create three DataTemplate and use DataTemplateSelector class to load the corresponding data template on run time.
MSDN - DataTemplateSelector