Re: Visual State Manager - What's Wrong? - WPF Discussion Boards

Re: Visual State Manager - What's Wrong?

31-Jul-10 10:16

I'm using VS2010 and SL4. I have the following XAML, and I'm trying to implement visual state management, but it appears I don't understand how it works.

XML

<Border CornerRadius="8" BorderBrush="Black" BorderThickness="1" Background="SlateBlue" 
        Height="35" HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <ItemsControl x:Name="myItems" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" Background="Transparent"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="States">
                            <VisualState x:Name="MouseOver">
                                <Storyboard >
                                    <ColorAnimation Storyboard.TargetName="itemBorder" 
                                                    Duration="0:0:1" To="Yellow" 
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"/>
                                    <ColorAnimation Storyboard.TargetName="itemContent" 
                                                    Duration="0:0:1" To="Black" 
                                                    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Normal">
                                <Storyboard >
                                    <ColorAnimation Storyboard.TargetName="itemBorder" Duration="0:0:1" 
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"/>
                                    <ColorAnimation Storyboard.TargetName="itemContent" Duration="0:0:1" 
                                                    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="itemBorder" Background="Transparent" Margin="5,0,0,0">
                        <Border.RenderTransform>
                            <CompositeTransform/>
                        </Border.RenderTransform>
                        <TextBlock x:Name="itemContent" Text="{Binding}" 
                                    FontSize="13" Padding="0" Margin="5,0,0,0" 
                                    HorizontalAlignment="Left" 
                                    VerticalAlignment="Center" 
                                    Foreground="White" />
                    </Border>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.Items>
            <core:String>Item 1</core:String>
            <core:String>Item 2</core:String>
            <core:String>Item 3</core:String>
            <core:String>Item 4</core:String>
        </ItemsControl.Items>
    </ItemsControl>
</Border>

.45 ACP - because shooting twice is just silly
-----
"Why don't you tie a kerosene-soaked rag around your ankles so the ants won't climb up and eat your candy ass..." - Dale Earnhardt, 1997
-----
"The staggering layers of obscenity in your statement make it a work of art on so many levels." - J. Jystad, 2001

Abhinav S31-Jul-10 20:35

Abhinav S

31-Jul-10 20:35

In this code, AFAIK, when you move your mouse over the ItemsControl, the background of the itemBorder (Border) changes to Yellow and itemContent (TextBox) foreground changes to Black. Both color change again when the state moves back to normal.

Re: Visual State Manager - What's Wrong?

#realJSOP1-Aug-10 1:34

Re: Visual State Manager - What's Wrong?

1-Aug-10 1:34

That's what I *want* to happen, but it's not happening.

Abhinav S1-Aug-10 4:01

Abhinav S

1-Aug-10 4:01

After some searching I found this[^] - apparently the datatemplate does not support the VisualStateManager. There is a workaround as given on this website.

Best of luck!
Smile | :)

Filling out extent of margins.

dbrenth29-Jul-10 9:16

dbrenth

29-Jul-10 9:16

I have a grid defined as

<Grid x:Name="CoordWPanel" Height="38" Margin="10,0,70,10" VerticalAlignment="Bottom" 
                        Background="#77000000" HorizontalAlignment="Left">

I want the background shade to cover the the bottom of the screen (less the margin area). But it always stops at the last control placed in the grid. The shading only goes halfway across the screen because that's how far the controls in the grid go. How can I get the grid to fill out the rest of the area in the margins?

Thanks.

Brent

dbrenth29-Jul-10 9:18

dbrenth

29-Jul-10 9:18

Nevermind - HorizontalAlignment="Stretch" Duh

Brent

BRShroyer29-Jul-10 9:30

29-Jul-10 9:30

I was typing my reply when you sent yours. My apologies.

Brad

Deja Moo - When you feel like you've heard the same bull before.

dbrenth29-Jul-10 9:32

dbrenth

29-Jul-10 9:32

No big deal, I just had one of those bonehead moments when I realize it must be time to go home.

Brent

BRShroyer29-Jul-10 9:26

Creating a Binding Resource

29-Jul-10 9:26

You don't have a width specified so the Grid will shrink to be as small as possible, i.e. just wide enough to hold your controls. And it will pin itself into the bottom left corner. Your right/top margins will only be used if the controls are big enough to fill the width/height of your window.

Change HorizontalAlignment="Left" to HorizontalAlignment="Stretch" (or delete the assignment all together, stretch is the default). The grid will take up as much room as possible leaving the margins specified on each side.

Depending on how you want your controls contained to look, you might want to put a StackPanel in the Grid to hold the controls or switch the Grid to a DockPanel and dock your controls to the bottom.

Brad

Deja Moo - When you feel like you've heard the same bull before.

BRShroyer29-Jul-10 8:20

Re: Creating a Binding Resource

29-Jul-10 8:20

I have a settings page that I want to hide certain settings unless it has been unlocked by a password by someone authorized to make the changes.

Right now what I have:

Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=Unlocked, Converter={StaticResource ResourceKey=BooleanVisibility}}"

Which works fine. However, it seems extremely time consuming to type that in for every control, even doing copy and paste.

I tried:

 <UserControl.Resources>
   <BooleanToVisibilityConverter x:Key="BooleanVisibility" />
   <Binding x:Key="LockedProperty" RelativeSource="{RelativeSource AncestorType={x:Type Window}}" Path="Unlocked" Converter="{StaticResource ResourceKey=BooleanVisibility}" />
 </UserControl.Resources></pre
And the Visibility of the control set to:
<pre>Visibility="{StaticResource ResourceKey=LockedProperty}"

Which complains that "A 'Binding' cannot be set on the 'Value' property of type 'DictionaryEntry'. A 'Binding' can only be set on a DependencyProperty of a DependencyObject." Which makes sense now that I'm reading it again. It thinks I'm trying to bind UserControl.Resources.

Is there any way to make a binding template or resource that would let me make the binding call a lot simpler?

Brad

Deja Moo - When you feel like you've heard the same bull before.

Abhishek Sur29-Jul-10 10:17

Abhishek Sur

29-Jul-10 10:17

See RelativeSource actually tries to find the window element just by traversing through the entire visual tree. So I recommend to use ElementName rather than an Ancestor.

Use x:Name for the Window and use

Visibility = {Binding ElementName=win, Path=Unlocked, Converter={StaticResource BooleanVisibility}}

Actually this will make the binding to avoid traversing through the Visual Tree.

Abhishek Sur
Don't forget to click "Good Answer" if you like this Solution.
Visit My Website-->

www.abhisheksur.com

Binding xaml property to class property

#realJSOP29-Jul-10 5:15

Re: Binding xaml property to class property

29-Jul-10 5:15

I am tring to bind a xaml element property to a property defined in the class.

I've tried the following:

public class FMChartMS
{
    private double setting = 275;
    public double MyProperty { get { return setting; } }
}

XML

<my:FMChartMS x:Name="ChartPage">

<Grid Height="{Binding MyProperty, ElementName=ChartPage}" />

It crashes the app. What am I missing?

BRShroyer29-Jul-10 7:57

Re: Binding xaml property to class property

29-Jul-10 7:57

You need to make a DependencyProperty for MyProperty.

public static readonly DependencyProperty MyPropertyProperty = 
    DependencyProperty.Register("MyProperty", typeof(double), typeof(FMChartMS), new PropertyMetadata(false));

public double MyProperty
{
  get { return (double)this.GetValue(MyPropertyProperty); }
  set { this.SetValue(MyProperty Property, value); }
}

I'm using the standard notation for naming dependency properties, PropertyNameProperty. That's why it's called MyPropertyProperty when using your example. In my project I have a property called Unlock with the dependency property called UnlockProperty. I like to declare the DependencyProperty first so IntelliSense will help fill in the blanks.

Brad

Deja Moo - When you feel like you've heard the same bull before.

#realJSOP29-Jul-10 8:16

Re: Binding xaml property to class property

29-Jul-10 8:16

That didn't work.

BRShroyer29-Jul-10 9:02