We Keep Coding

Change predefined style inside a control in xaml

I have the following style in App.xaml:
<Style TargetType="{x:Type Button}">
<Style.Resources>
<DataTemplate x:Key="Unpressed">
<Image Stretch="Uniform" Source="Img/button1.png"/>
</DataTemplate>
<DataTemplate x:Key="Pressed">
<Image Stretch="Uniform" Source="Img/button1_press.png"/>
</DataTemplate>
</Style.Resources>
<Setter Property="ContentTemplate" Value="{StaticResource Unpressed}"/>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="ContentTemplate" Value="{StaticResource Pressed}"/>
</Trigger>
</Style.Triggers>
</Style>
I want to change the data template from my button, something like this:
<Button x:Name="Button2">
<Style>
<Style.Resources>
<DataTemplate x:Key="Unpressed">
<Image Stretch="Uniform" Source="../Img/button2.png"/>
</DataTemplate>
<DataTemplate x:Key="Pressed">
<Image Stretch="Uniform" Source="../Img/button2_press.png"/>
</DataTemplate>
</Style.Resources>
</Style>
</Button>
So basically, all my buttons have the same style but each button have an unique image, I need to change the DataTemplate of the style individually for each button

This is my proposed solution:
For the style:
<Application.Resources>
<local:ImgToDisplayConverter x:Key="ImgToDisplayConverter"/>
<local:ImgPressedToDisplayConverter x:Key="ImgPressedToDisplayConverter"/>
<Style TargetType="Image" x:Key="PressedButtonImageStyle">
<Setter Property="Source">
<Setter.Value>
<MultiBinding Converter="{StaticResource ImgToDisplayConverter}">
<Binding Path="Tag" RelativeSource="{RelativeSource AncestorType=Button}"/>
</MultiBinding>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType=Button}}" Value="true">
<Setter Property="Source">
<Setter.Value>
<MultiBinding Converter="{StaticResource ImgPressedToDisplayConverter}">
<Binding Path="Tag" RelativeSource="{RelativeSource AncestorType=Button}"/>
</MultiBinding>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Application.Resources>
For the Control:
<Button Tag="button1" Width="100" Height="100" HorizontalAlignment="Left">
<ContentControl>
<Image Stretch="Uniform" Style="{StaticResource PressedButtonImageStyle}" IsHitTestVisible="False"/>
</ContentControl>
</Button>
The Converters:
class ImgToDisplayConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
string image = values[0].ToString();
string resourceName = String.Format("pack://application:,,,/{0}.png", image);
return new BitmapImage(new Uri(resourceName));
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
class ImgPressedToDisplayConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
string image = values[0].ToString();
string resourceName = String.Format("pack://application:,,,/{0}_pressed.png", image);
return new BitmapImage(new Uri(resourceName));
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
You can change the code depending on your needs.

I use this simple code and it works well(if you want to release the button from being pressed ,set timer).I hope this will help you..
xaml code
<Button Name="male" Height="318" Width="352" Click="male_Click" Margin="236,120,1332,642">
<Button.Background>
<ImageBrush ImageSource="pack://application:,,,/Imagesrc/logotype/USER_MALE.png" ></ImageBrush>
</Button.Background>
</Button>
pressed code
public void male_Click(object sender, RoutedEventArgs e)
{
System.Windows.Controls.Image img = new System.Windows.Controls.Image();
img.Source = new BitmapImage(new Uri(#"pack://application:,,,/maindocket;component/Imagesrc/logotype/USER_MALE_SELECTED.png"));
male.Content = img;
}

toggle button controlled popup

I have a popup that opens when we click on the toggle button. I have written a converter such that popup closes whenever we click on toggle button again or when we click anywhere other than the popup.
the XAML code is this
<ToggleButton x:Name="m_XYProfileBtn" Content="Profiles" Height="24" Style="{DynamicResource StatusFlatToggle}"
Visibility="{Binding IsToggleStatusVisibility}" IsChecked="{Binding IsPopUpOpen}" />
<Popup Margin="5" Name="ProfilePopup" HorizontalAlignment="Center" VerticalAlignment="Center"
Width="400" Height="500" AllowsTransparency="True"
IsOpen="{Binding IsPopUpOpen}"
Focusable="False"
PopupAnimation="Slide"
Placement="Top"
VerticalOffset="-4"
HorizontalOffset="2"
>
<Popup.StaysOpen>
<MultiBinding Converter="{StaticResource MultiBinding_StayOpen}">
<Binding ElementName="m_XYProfileBtn" Path="IsMouseOver"/>
<Binding ElementName="Pin" Path="IsChecked" />
</MultiBinding>
</Popup.StaysOpen>
<Border BorderThickness="2" BorderBrush="Gray" Background="White" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.05*" />
<RowDefinition Height="0.95*" />
</Grid.RowDefinitions>
<CheckBox Name="Pin" Content="Pin" Style ="{StaticResource PinBox}" HorizontalAlignment="Right"/>
<Grid Name="xProfileGrid" Grid.Row="1" />
</Grid>
</Border>
and the C# converter code is this
public class MultiBinding_StayOpen : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
bool toggleIsMouseOver;
bool pinIsChecked;
//System.Threading.Thread.Sleep(3000);
toggleIsMouseOver = System.Convert.ToBoolean(values[0]);
pinIsChecked = System.Convert.ToBoolean(values[1]);
if (pinIsChecked == true)
return true;
else if (toggleIsMouseOver == true)
return true;
else if (toggleIsMouseOver == false)
{
System.Threading.Thread.Sleep(300);
return false;
}
return true;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
This works fine but the first time you click on the toggle button, popup opens up again in place of closing. After that it works perfectly. Any suggestion how I can fix this?

Apply Converter on Textblock inside Content Presenter

I have a custom ControlTemplate for my Groupbox:
<converters:StringCaseConverter x:Key="stringCaseConverter" />
<Style TargetType="GroupBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupBox">
<Border BorderBrush="#DEEBF3" BorderThickness="1,1,1,1" CornerRadius="3,3,3,3" Margin="2,2,2,2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<Label Foreground="#3B3A35" FontSize="17" FontWeight="SemiBold" FontFamily="Segoe UI">
<ContentPresenter Margin="4,0,4,0" ContentSource="Header" RecognizesAccessKey="True">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Text" Value="{Binding Converter={StaticResource stringCaseConverter}, ConverterParameter='Title'}" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</Label>
</StackPanel>
<ContentPresenter Grid.Row="1" Margin="14" />
</Grid>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" Opacity=".5">
<GradientStop Offset="0" Color="#AFBCC7" />
<GradientStop Offset=".1" Color="#C3D6E4" />
<GradientStop Offset=".9" Color="#C6D8E2" />
<GradientStop Offset="1" Color="#B4C3CF" />
</LinearGradientBrush>
</Border.Background>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
As you can see, there is a converter that tries to convert the header text to TitleCase using the following Converter:
[ValueConversion(typeof(string), typeof(string))]
public class StringCaseConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null)
return null;
var currentString = (string)value;
var conversion = (string)parameter;
if (conversion == "Base64")
{
byte[] txtByte = Encoding.Default.GetBytes(currentString);
string outputString = System.Convert.ToBase64String(txtByte);
return outputString;
}
if (conversion == "Upper")
return currentString.ToUpper(culture);
if (conversion == "Lower")
return currentString.ToLower(culture);
if (conversion == "Title")
{
TextInfo text = culture.TextInfo;
return text.ToTitleCase(currentString);
}
return string.Empty;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
The problem I am having here is that when I debug the code, the code executes perfectly and I step into the converter code, where it actually converts the header text into TitleCase. BUT... when I look at the app, the header is not reflecting what the converter returned.
Any idea why?

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.

WPF - WP8: how to hide button visiblity?

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.