WPF - WP8: how to hide button visiblity? - c#

i have textbox with button. my deire is, if textbox is empty, the button should be deactivated (means 0.5 opacity). if user enters something in the textbox, the button should be set to visible. like if users clicked the button, again it should be deactivated unless it done the work for what purpose it has been clicked ?
Any ideas, how to do that ?
My CODE;
<Button Content="Go !" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,-3,0,0" Width="161" Name="searchbutton" Click="search" Height="78" BorderBrush="Transparent"/>

You could use a value converter to convert the text of the TextBox to the Opacity value of the button:
<TextBox x:Name="txtBox" />
<Button Opacity="{Binding Text, ElementName=txtBox, Converter={StaticResource textToOpacityConverter}}" Content="Go !" Foreground="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="283,-3,0,0" Width="161" Name="searchbutton" Click="search" Height="78" BorderBrush="Transparent" />
This is the value converter:
public class TextToOpacityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (string.IsNullOrEmpty(value as string))
{
return 0.5;
}
return 1;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
If you need more info about ValueConverter you can see here http://www.c-sharpcorner.com/uploadfile/dpatra/value-converter-in-wpf-part-i/

This control Template can be used to set the opacity of button if Textbox text is empty.
<ControlTemplate x:Key="myButtonTemplate" TargetType="{x:Type ContentControl}">
<StackPanel Orientation="Horizontal">
<TextBox Width="100" x:Name="searchTxt" Text="{Binding}"></TextBox>
<Button x:Name="myButton">Search</Button>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger SourceName="searchTxt" Property="Text" Value="">
<Setter TargetName="myButton" Property="Opacity" Value="0.2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
control implementing the template
<ContentControl Template="{StaticResource myButtonTemplate}">
Thanks

Like as said Emanuele use just IsEnable property will setcolor of button to grey :)

You can use TextChanged event and then use Length on the text inside it. For button just use Click event and set Opacity to your desired value.

Related

The Resource 'BoolToInvertedBoolConverter' could not be resolved

I am new on silverlight development. During my activity i have encountered an error which is i mentioned on the title of this post. My main purpose is popup date picker when clicking button.
<ToggleButton x:Name="TogglePopupButton" HorizontalAlignment="Right" Height="26" VerticalAlignment="Center" Grid.Column="1" Style="{StaticResource ToolIconToggleButtonStyle}" Width="26"
IsEnabled="{Binding ElementName=ToggledPopup, Path=IsOpen,Converter={StaticResource BoolToInvertedBoolConverter}}">
this is .xaml
<UserControl
<xmlns:local="clr-namespace:US.Payment.Web.Modules.PaymentMachine.Utils">
<UserControl.Resources>
<US_Payment_Web_Converters:GroupRowHeaderVisibilityConverter x:Key="GroupRowHeaderVisibilityConverter"/>
<viewModel:ImportUSPViewModel x:Name="ViewModel"/>
<local:AmountValuesConverter x:Name="AmountConverter"/>
<local:BackgroundConverter x:Key="BackgroundConverter" />
<local:BoolToInvertedBoolConverter x:Key="BoolToInvertedBoolConverter " />
<Style x:Key="CalendarDayButtonStyle1" TargetType="prim:CalendarDayButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="prim:CalendarDayButton">
<Grid Background= "{Binding Converter={StaticResource BackgroundConverter}, Path=Date}">
<ContentControl x:Name="Content" Margin="5,1,5,1" Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
This is BoolToInvertedBoolConverter.cs file
public class BoolToInvertedBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value is bool)
{
bool boolValue = (bool)value;
return !boolValue;
}
else
return false;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException("ConvertBack() of BoolToInvertedBoolConverter is not implemented");
}
}
The problem is, you accidentally put a space character at the and of the x:Key value when declaring your resource. Remove that character and it will work.
x:Key="BoolToInvertedBoolConverter "-> has space at the end but should be
x:Key="BoolToInvertedBoolConverter" -> without space.

want to change background of textbox based on the input of another textbox wpf

i am trying to change the background of textbox based on the inputs of another textbox , like when i input "process" into one textbox the background of the other textbox should change to green.
xmal code is
<Window
x:Name="mywindow"
x:Class="labelsetboxreadbox.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:labelsetboxreadbox"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<local:StaffNameToBackgroundColourConverter x:Key="converter1"/>
</Window.Resources>
<Grid>
<Label Name="label" Width="150" Height="50" Margin="15,94,352,175" Background="Black"/>
<TextBox Name="setbox" Width="150" Height="50" Margin="167,95,200,174" Background="{Binding ElementName=mywindow,UpdateSourceTrigger=PropertyChanged,Converter={StaticResource converter1}}" />
<TextBox Name="readbox" Width="150" Height="50" IsReadOnly="True" Margin="318,95,49,174" Background="Aqua"/>
<TextBox Name="statusbar" Width="150" Height="50" VerticalAlignment="Bottom" HorizontalAlignment="Right" TextChanged="statusbar_TextChanged"/>
</Grid>
</Window>
I am sharing a sample by trigger . With Converter you can pass the parameters with Element Name property as well.
<StackPanel>
<TextBlock Height="20" Name="colorTb" >
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="Red"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=textTb, Path=Text}" Value="Process">
<Setter Property="Background" Value="Green"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBox Height="20" Name="textTb" Text="xyz" >
</TextBox>
</StackPanel>
This is with converter
<StackPanel>
<StackPanel.Resources>
<converters:ColorConverter x:Key="converter1"></converters:ColorConverter>
</StackPanel.Resources>
<TextBox Height="20" Name="colorTb" Background="{Binding ElementName=textTb, Path=Text ,Converter={StaticResource converter1}}" >
</TextBox>
<TextBox Height="20" Name="textTb" Text="xyz" >
</TextBox>
</StackPanel>
And Converter Code Be like
public class ColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var backColor = Brushes.Transparent;
if (value!=null && value.ToString().Equals("Process"))
{
backColor = Brushes.Green;
}
return backColor;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

Suppressing right-click context menu on canvas

I have a canvas and when a user right clicks on it, a context menu appears. I also have a checkbox, and when that box is checked, I DON'T want the context menu to appear. The reason for this is that, when the checkbox is checked, the first two right clicks from the user will drop ellipses at the two points of the right clicks. Right now though, the context menu will popup on those two right clicks. Here's the relative code:
<Window x:Class="Testproj.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Testproj"
xmlns:localConverters="clr-namespace:Testproj"
x:Name="this"
Height="650" Width="1091"
Loaded="this_Loaded"
Closing="this_Closing">
<Window.Resources>
<local:BoolToVisibilityConverter x:Key="converter"/>
</Window.Resources>
<Grid Height="Auto">
<Grid.Resources>
<local:NullToVisibilityConverter x:Key="nullToVisibilityConverter" />
</Grid.Resources>
<Grid VerticalAlignment="Top">
<DockPanel>
<CheckBox x:Name="scaleBox" Content="Scale" IsChecked="False" Checked="scaleischecked"/>
</Menu>
</DockPanel>
</Grid>
<Viewbox Margin="0,23,0,157" x:Name="viewbox1" ClipToBounds="True">
<Canvas Margin="0,21,0,12" x:Name="canvas1" ClipToBounds="True" RenderOptions.BitmapScalingMode="HighQuality" MouseWheel="Canvas_Zoom" MouseRightButtonDown="get_MousePosition" HorizontalAlignment="Left" Width="3138" Height="1260">
<Canvas.RenderTransform>
<MatrixTransform x:Name="mt"/>
</Canvas.RenderTransform>
<Canvas.ContextMenu>
<ContextMenu Name="nodeContextMenu" Visibility="{StaticResource converter}" >
<MenuItem x:Name="test1" IsCheckable="False" Header="test1" Click="WaypointMenuItem_Click" >
</MenuItem>
<MenuItem x:Name="test2" IsCheckable="False" Header="test2" Click="KnownObjectMenuItem_Click" >
</MenuItem>
</ContextMenu>
</Canvas.ContextMenu>
</Canvas>
</Viewbox>
</Grid>
</Window>
and the code behind for the right-click on canvas:
private void get_MousePosition(object sender, MouseButtonEventArgs e)
{
if (scaleBox.IsChecked == true)
{
get_points(sender, e);
}
}
I've tried messing around with the isOpen property of the context-menu, but it always open on right click regardless if it's set to true or false.
Attempt at converter below. If this is correct, what is the proper way to bind the checkbox and contextmenu using this?
namespace Testproj
{
public class BoolToVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
Visibility visibility = Visibility.Collapsed;
if (value != null)
{
visibility = (bool)value ? Visibility.Collapsed : Visibility.Visible;
}
return visibility;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
I would implement a ValueConverter or MultiValueConverter and then bind to the checkbox using the converter to dictate the state (i.e. enabled/disabled) of the contextmenu.
<Canvas.ContextMenu>
<ContextMenu Name="contextmenu1" Visibility="{Binding ElementName=scaleBox, Path=IsChecked, Converter={StaticResource BoolToVisibilityConverter}}" >
<MenuItem x:Name="item1" IsCheckable="False" Header="item2" />
<MenuItem x:Name="item2" IsCheckable="False" Header="item1" />
</ContextMenu>
Here's the way I figured out how to do it since I couldn't get the converter to work properly:
Set the ContextMenuService.IsEnabled property to false in the canvas. Then, in the code behind, set nodeContextMenu.IsOpen = true when the scalebox is not checked. This seems to do the trick.
<Canvas Margin="0,21,0,12" x:Name="canvas1" ContextMenuService.IsEnabled="False" />
if (scaleBox.IsChecked == true)
{
get_Scaling(sender, e);
}
else
{
nodeContextMenu.IsOpen = true;
}

Compare ObservableCollection with Toggle Button listBox?

i have listbox taht fill with list of toggle button in after run the project, if i have observablecollection and i want to compare this ObservableCollection with items in list box where if the item in ObservableCollection exist in listbox i want to make this item (toggle button) checked,
i have tryed to do that but i cant access to toggle button in code behind, becouse the list of toggle buttons show after run the project.
here's my listbox code :
<ListBox x:Name="lbname" ItemsSource="{Binding source}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton x:Name="btnitem" Content="{Binding Name}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
and my observableCollection :
IQueryable<items> query = _context.items;
ocitems = new ObservableCollection<items>(query);
In short : How can i compare ObservableCollection items with listbox (Buttons) and if item exist in listbox make the Toggle button that represent the item is checked?
hope this clear.
------------------------------------------ More Detail
i have this list box that show choices for selected item, this listBox filled by ObservableCollection "ocSelectedChoice" :
<ListBox x:Name="lbChoices" ItemsSource="{Binding ocSelectedChoice}" DisplayMemberPath="ChoiceName" HorizontalAlignment="Left" Height="165" VerticalAlignment="Top" Width="186" Margin="567,50,0,0" BorderBrush="#FFC1C1C1" Background="#FFE3E3E3" SelectionMode="Extended">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Height" Value="30"/>
<Setter Property="Background" Value="#FFc4d0df"/>
<Setter Property="BorderBrush" Value="#FFC1C1C1"/>
<Setter Property="BorderThickness" Value="0.8"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
when i want to change this item choices, i press the edit button,and will show me windows that has listbox filled by ObservableCollection for all available choices, see the photo, the main problem how to make 'choices 1' lock checked (green one) in choices windows:
<ItemsControl x:Name="icItemGroup" ItemsSource="{Binding PagedSource, ElementName=rdpChoices}" Margin="26,79,0,0" FontWeight="Bold" HorizontalAlignment="Left" Width="506" Height="210" VerticalAlignment="Top" >
<!-- ItemsPanelTemplate -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="4" HorizontalAlignment="left" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- ItemTemplate -->
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton x:Name="tbtnChoices" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="tahoma" FontSize="12" Height="45" Width="120" FontWeight="Normal" Margin="0,0,0,5" Background="#FFE8E8E8" BorderBrush="#FFC1C1C1" Foreground="#FF6A6A6A"
Content="{Binding ChoiceName}" TabIndex="{Binding ChoicesID}" Click="tbtnChoices_Click">
<ToggleButton.IsChecked>
<MultiBinding Converter="{StaticResource Choices}">
<Binding Path="ocChoice" RelativeSource="{RelativeSource AncestorType={x:Type Window}}"/>
</MultiBinding>
</ToggleButton.IsChecked>
</ToggleButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Converter :
public class ChoicesConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
Choice _choice = values[0] as Choice;
ObservableCollection<Choice> ocChoices = values[1] as ObservableCollection<Choice>;
return ocChoices.Contains(_choice);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter,
System.Globalization.CultureInfo culture)
{
return null;
}
}
i tried to make this, but sorry still there something unclear for me, please help to solved this issue because it's important for my project.
you should use the multivalue converter to do that i.e bind ToggleButton IsChecked like below:
<ListBox x:Name="lbname" ItemsSource="{Binding source}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ToggleButton x:Name="btnitem" Content="{Binding Name}">
<ToggleButton.IsChecked>
<MultiBinding Converter="{StaticResource MyConverter}">
<Binding />
<Binding Path="DataContext.ObservableCollectionToCompare" RelativeSource="{RelativeSource AncestorType={x:Type Window}}"/>
</MultiBinding>
</ToggleButton.IsChecked>
</ToggleButton>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
Here I am assuming that the observalblecollectin to which you want to compare is a property in your view's DataContext.
MyConverter is the multivalue converter that you need to create.
And in the Convert method of your converter you can compare if the item is there in the collection and return true of false accordingly.
public class MyConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter,
System.Globalization.CultureInfo culture)
{
Item listItem = values[0] as Item;
ObservableCollection<Item> collection = values[1] as ObservableCollection<Item>;
return collection.Contains(listItem);
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter,
System.Globalization.CultureInfo culture)
{
return null;
}
}
oky, i solved it, here's my code :
This is the converter :
public class IsSelectedChoiceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
bool _check = false;
if (value == null)
return false;
Item currentItem = (Item)value;
if (currentItem.ChoicesinItem.Count == 0)
_check = false;
foreach (var _choicesinItem in currentItem.ChoicesinItem)
{
if (currentItem.CurrentChoiceId == _choicesinItem.ChoicesId)
_check = true;
}
return _check;
}
and xaml code :
<ToggleButton x:Name="tbtnChoices" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="tahoma" FontSize="12" Height="45" Width="120" FontWeight="Normal" Margin="0,0,0,5" Background="#FFE8E8E8" BorderBrush="#FFC1C1C1" Foreground="#FF6A6A6A"
IsChecked="{Binding Path=Item,UpdateSourceTrigger=PropertyChanged, Converter={StaticResource IsSelectedChoice}}"
Content="{Binding Item.CurrentChoiceName}" TabIndex="{Binding Item.CurrentChoiceId}" Click="tbtnChoices_Click">
</ToggleButton>
it's work now, Thanks for anyone help me.

Toggle TextWrapping in TextBox inside FlipView

I have a FlipView where each FlipViewItem contains a TextBox bound to an ObservableCollection and I need to toggle TextWrapping for the TextBox's that are inside the FlipView.
I have tried everything I could think of and no help online thus far. Not a single result I could find.
How can I do this?
XAML:
...
// This part is for the AppBar Toggle button
<ToggleButton x:Name="wordWrapToggleButton" Style="{StaticResource WordWrapAppBarButtonStyle}" />
...
// For the FlipView
<FlipView x:Name="flipView" Grid.Row="1" Margin="0, 50, 0, 0" ItemsSource="{Binding Note, Mode=TwoWay}" Loaded="flipView_Loaded" SelectionChanged="flipView_SelectionChanged" FontSize="12.667">
<FlipView.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding Contents, Mode=TwoWay}" Tag="{Binding Title, Mode=TwoWay}" TextWrapping="{Binding ElementName=wordWrapToggleButton, Path=.CheckState, Mode=TwoWay}" IsSpellCheckEnabled="True" AcceptsReturn="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{x:Null}" FontSize="{Binding ElementName=flipView, Path=FontSize, Mode=OneWay}" />
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
You have to create a binding converter that converts from bool to TextWrapping
public class BooleanToTextWrappingConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
return (value is bool && (bool)value) ? TextWrapping.Wrap : TextWrapping.NoWrap;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
return value is TextWrapping && (TextWrapping)value == TextWrapping.Wrap;
}
}
and use that in your binding
<Page.Resources>
<local:BooleanToTextWrappingConverter x:Key="BooleanToTextWrappingConverter"/>
</Page.Resources>
...
<DataTemplate>
<TextBox Text="{Binding Contents, Mode=TwoWay}"
TextWrapping="{Binding Path=IsChecked, ElementName=wordWrapToggleButton,
Converter={StaticResource BooleanToTextWrappingConverter}}"/>
</DataTemplate>
Note that the TextWrapping binding isn't two-way, as that makes no sense.

Categories