CODEWITHSUNDEEP
c#wpfitemscontrol
Allen Pestaluky
Allen Pestaluky

Reputation: 3716

WPF: Changing styles within ItemsControl based on binding values

I have an ItemsControl that looks something like this:

<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding Name}" />
                <Slider Value="{Binding Volume}" />
                <Slider Value="{Binding Pan}" />
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Which is bound something like this:

ObservableCollection<UserSettings> connectedUserSettings = new ObservableCollection<UserSettings>();
DataContext = connectedUserSettings;

Where UserSettings looks something like this:

public class UserSettings
{
    public string Name;
    public int Volume;
    public float Pan;
    public bool Audible;
    public bool UserIsSpeaking;
}

I want to change the Name TextBlock's background to be "Lime" when UserIsSpeaking is true. I would also like to disable the Slider controls when Audible is false. What's the best way to go about this? Is there a simple way to do this using styles or something in XAML?

Upvotes: 0

Views: 1486

Answers (1)

Nitin Purohit
Nitin Purohit

Reputation: 18580

You can directly bind your sliders and use Trigger like below to change background of TextBlock. Also make sure that Collection you are binding to should be property and not field. Same is with UserSettings class, expose properties not field and implement INotifyPropertyChanged interface if you want to change UI at runtime according to property changes

<ItemsControl ItemsSource="{Binding}">
            <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                        <TextBlock x:Name="myTextBlock" Text="{Binding Name}" />
                        <Slider IsEnabled="{Binding Audible}" Value="{Binding Volume}" />
                        <Slider IsEnabled="{Binding Audible}"  Value="{Binding Pan}" />
                </Grid>
                <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding UserIsSpeaking}" Value="True">
                            <Setter TargetName="myTextBlock" Property="Background" Value="Lime"></Setter>
                        </DataTrigger>
                 </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
</ItemsControl>

Upvotes: 1

Related Questions