WPF Styling/Templating Problem - WPF Discussion Boards

I have been working on styling an expander. When it's expanded, there is a line across the top that seperates the header area from the content area. Any way to remove this line?

I added this:

<Trigger Property="IsExpanded"
            Value="True">
    <Setter TargetName="Border"
            Property="BorderThickness"
            Value="0" />
</Trigger>

But it hide ALL of the header's border when the control is expanded. I just want to remove the lower portion of the header's border.

Thanks

Everything makes sense in someone's mind

Kevin Marois wrote:
I just want to remove the lower portion of the header's border.

Then you can't use a border, you are going to have to break up the control so you can manipulate the lower bound!

Never underestimate the power of human stupidity
RAH

Mycroft Holmes wrote:
Then you can't use a border

Why not? You can set the thickness on each side individually.

Then you can use the border and you have answered the question! I have not played with the border other than the minimum, I responded based on the question, I would have thought the OP would have explored that before asking the question, it seems so obvious. Silly of me!

Have 5 sisnce the OP does not seem to have worked out the response to a good answer.

Never underestimate the power of human stupidity
RAH

Set BorderThickness to "1,1,1,0" in your trigger.

Thank you. Thank you. Thank you.

You are a God!

Everything makes sense in someone's mind

Hi
I use a ComboBox style (the style from msdn example), but I customized it to replace the standard popup with a datagrid.

The problem I have is I can't catch Key.Down with the event handler PreviewKeyDown.
The comboBox is defined with the style described.

It has to do with the template style applied on the comboBox.
Somehow the keydown is caught by the combobox, because I see for few ms the ItemBinding path in the textBox, but it is not caught in the code.

I have tried also to put in style somthing like with no success.

HTML

<EventSetter Event="PreviewKeyDown" Handler="OnPreviewKeyDown" />

any ideas how to solve it?

Is it possible to use my comboBox declared in xaml and override OnPreviewKeyDown in the code behind?

HTML

<ComboBox Name="comboBoxFunctions" 
                                          Style="{DynamicResource ComboBoxStyleDataGridMethods}" 
                                          Height="23" HorizontalAlignment="Left" Margin="6,26,0,0"
                                          IsEditable="true"
                                          VerticalAlignment="Top" Width="231" 
                                          IsDropDownOpen="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Gui:BuildCommandWindow}}, Path=IsDropDownOpened }" 
                                          KeyUp="ComboBoxFunctionsKeyUp" 
                                          PreviewKeyUp="ComboBoxFunctionsPreviewKeyUp" 
                                          IsTextSearchEnabled="False" />

modified 27-Mar-12 11:54am.

I styled an expander control. I then templated a ListView so that each ListViewItem is the expander.

The problem is that the expander doesn't fill up to the width of the list. It only appears as wide as the expander's content.

Ok, here's the XAML. I know it's alot but I thought you may want to copy & paste to see what it does. Can anyone see why the list items don't sie properly?

<Window.Resources>

    <!--Colors-->
    <Color x:Key="Color1">Gray</Color>
    <Color x:Key="Color2">SlateGray</Color>
    <Color x:Key="Color3">DarkSlateGray</Color>
    <Color x:Key="Color4">Orange</Color>
    <Color x:Key="HeaderGradientBrush1">DarkGray</Color>
    <Color x:Key="HeaderGradientBrush2">White</Color>

    <!--Brushes-->
    <SolidColorBrush x:Key="ToggleButtonEllipseBorderBrush"
                        Color="{StaticResource Color1}" />
    <SolidColorBrush x:Key="ToggleButtonArrowBrush"
                        Color="{StaticResource Color2}" />
    <SolidColorBrush x:Key="ToggleButtonUpArrowBrush"
                        Color="{StaticResource Color4}" />
    <SolidColorBrush x:Key="ToggleButtonRectangleBrush"
                        Color="{StaticResource Color2}" />
    <SolidColorBrush x:Key="ToggleButtonBackgroundBrush"
                        Color="Transparent" />
    <SolidColorBrush x:Key="ContentAreaBackgroundBrush"
                        Color="White" />
    <SolidColorBrush x:Key="ContentAreaBorderBrush"
                        Color="{StaticResource Color3}" />
    <SolidColorBrush x:Key="CardSeperatorBorderBrush"
                        Color="{StaticResource Color3}" />
    <SolidColorBrush x:Key="ExpanderBorderBrush"
                        Color="{StaticResource Color1}" />
    <SolidColorBrush x:Key="ExpanderHeaderTextColor"
                        Color="{StaticResource Color3}" />
    <LinearGradientBrush x:Key="headerGradientBrush"
                            EndPoint="0.504,1.5"
                            StartPoint="0.504,0.03">
        <GradientStop Color="{StaticResource HeaderGradientBrush1}"
                        Offset="0" />
        <GradientStop Color="{StaticResource HeaderGradientBrush2}"
                        Offset="0.567" />
    </LinearGradientBrush>

    <!--Control template for the Toggle Button-->
    <ControlTemplate x:Key="ExpanderToggleButton"
                        TargetType="{x:Type ToggleButton}">

        <Grid Width="16"
                Height="16">

            <Path x:Name="UpperArrow"
                    Stroke="{StaticResource ToggleButtonArrowBrush}"
                    StrokeThickness="2"
                    Data="M 3,4 l 5,5 5,-5" />

            <Path x:Name="LowerArrow"
                    Stroke="{StaticResource ToggleButtonArrowBrush}"
                    StrokeThickness="2"
                    Data="M 3,9 l 5,5 5,-5" />

            <ContentPresenter VerticalAlignment="Center"
                                HorizontalAlignment="Center"
                                Content="{TemplateBinding Content}" />
        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked"
                        Value="true">
                <Setter Property="Data"
                        TargetName="UpperArrow"
                        Value="M 3,9 l 5,-5 5,5" />
                <Setter Property="Data"
                        TargetName="LowerArrow"
                        Value="M 3,6 l 5,-5 5,5" />
                <Setter Property="Stroke"
                        TargetName="UpperArrow"
                        Value="{StaticResource ToggleButtonUpArrowBrush}" />
                <Setter Property="Stroke"
                        TargetName="LowerArrow"
                        Value="{StaticResource ToggleButtonUpArrowBrush}" />
            </Trigger>
            <Trigger Property="IsMouseOver"
                        Value="true">
                <Setter Property="Stroke"
                        TargetName="UpperArrow"
                        Value="{StaticResource ToggleButtonUpArrowBrush}" />
                <Setter Property="Stroke"
                        TargetName="LowerArrow"
                        Value="{StaticResource ToggleButtonUpArrowBrush}" />
            </Trigger>
        </ControlTemplate.Triggers>


    </ControlTemplate>

    <!-- Expander style -->
    <Style x:Key="ContactCardExpanderStyle" 
            TargetType="Expander">

        <Setter Property="Foreground"
                Value="{StaticResource ExpanderHeaderTextColor}" />

        <Setter Property="Template">
            <Setter.Value>

                <!-- Control template for Expander -->
                <ControlTemplate TargetType="Expander">
                    <Grid>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Name="ContentRow"
                                            Height="0" />
                        </Grid.RowDefinitions>

                        <!--Header Area-->
                        <Border Name="Border"
                                Grid.Row="0"
                                Background="{StaticResource headerGradientBrush}"
                                BorderBrush="{StaticResource ExpanderBorderBrush}"
                                BorderThickness="1">

                            <Grid>

                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="20" />
                                </Grid.ColumnDefinitions>

                                <!--Left Rectangle-->
                                <Rectangle x:Name="LeftPanel"
                                            Grid.Row="0"
                                            Fill="{StaticResource ExpanderBorderBrush}"
                                            Width="10"
                                            Margin="2"
                                            HorizontalAlignment="Left" />

                                <!--Toggle Button-->
                                <ToggleButton Grid.Column="2"
                                                IsChecked="{Binding Path=IsExpanded,Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                OverridesDefaultStyle="True"
                                                Template="{StaticResource ExpanderToggleButton}"
                                                Background="{StaticResource ToggleButtonBackgroundBrush}" />

                                <!--Caption-->
                                <ContentPresenter Grid.Column="1"
                                                    Margin="5"
                                                    ContentSource="Header"
                                                    RecognizesAccessKey="True" />
                            </Grid>

                        </Border>

                        <!--Content Area-->
                        <Border Name="Content"
                                Grid.Row="1"
                                Background="{StaticResource ContentAreaBackgroundBrush}"
                                BorderBrush="{StaticResource ExpanderBorderBrush}"
                                BorderThickness="1,0,1,1"
                                CornerRadius="0,0,3,3">

                            <ContentPresenter Margin="4" />

                        </Border>

                    </Grid>

                    <ControlTemplate.Triggers>

                        <!--This sets the foreground text to orange when the mouse is over
                        the control and the control is NOT expanded-->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver"
                                            Value="True" />
                                <Condition Property="IsExpanded"
                                            Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Foreground"
                                    Value="{StaticResource ToggleButtonUpArrowBrush}" />
                            <Setter TargetName="LeftPanel"
                                    Property="Fill"
                                    Value="{StaticResource ToggleButtonUpArrowBrush}" />
                        </MultiTrigger>

                        <!--This sets the arrow and rectangle colors to orange when the mouse
                        is over the control and the control IS expanded-->
                        <Trigger Property="IsExpanded"
                                    Value="True">

                            <Setter TargetName="ContentRow"
                                    Property="Height"
                                    Value="{Binding ElementName=Content,Path=DesiredHeight}" />
                            <Setter TargetName="Border"
                                    Property="BorderBrush"
                                    Value="{StaticResource ExpanderBorderBrush}" />
                            <Setter TargetName="LeftPanel"
                                    Property="Fill"
                                    Value="{StaticResource ToggleButtonUpArrowBrush}" />

                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

    <!--List Item Template-->
    <DataTemplate x:Key="contactCardTemplate">

        <Expander Style="{StaticResource ContactCardExpanderStyle}"
                    Header="{Binding DisplayName}"
                    Margin="2,2.5,2,2.5">
                
                

        </Expander>
    
    </DataTemplate>

</Window.Resources>

<Grid x:Name="LayoutRoot">
        
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>      <!--Menu Row-->
        <RowDefinition Height="Auto" />     <!--Toolbar Row-->
        <RowDefinition Height="*" />        <!--Main Content Row-->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />   <!--Contacts Column-->
        <ColumnDefinition Width="*" />      <!--Contact Info Column-->
        <ColumnDefinition Width="*" />      <!--Right Panel Column-->
    </Grid.ColumnDefinitions>
        
    <!--Left side contacts list grid-->
    <Grid x:Name="ContactsListGrid"
            Grid.Row="2"
            Grid.Column="0">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />     <!--Options Expander Row-->
            <RowDefinition Height="*" />        <!--Contacts List-->
        </Grid.RowDefinitions>

        <!--Contacts List-->
        <ListView x:Name="ContactsList"
                    Grid.Row="1"
                    ItemsSource="{Binding Contacts}"
                    SelectedItem="{Binding SelectedContact, Mode=TwoWay}"
                    BorderBrush="{StaticResource ContentAreaBorderBrush}"
                    ItemTemplate="{StaticResource contactCardTemplate}"
                    Margin="3" />
    </Grid>
        
</Grid>

Everything makes sense in someone's mind

Try

XML

<RowDefinition Height="*" />     <!--Options Expander Row-->
<RowDefinition Height="Auto" />        <!--Contacts List-->

How would changing the height of the rows affect the width of the expanders in the list?

Everything makes sense in someone's mind

Hi, I am using WPF Toolkit Charting controls to create a bubble chart. I have been able to plot the bubble chart but now I need each bubble to be shown as a circle with sectors like in a piechart.

My first thought is to plot the piechart in a user control that would serve as a template for the bubble datapoints in the Bubble chart - if this is possible, i have no idea how to go about it.

So is there a way to customize the bubble Datapoints of the Bubble Series in this way or can someone tell me how i can achieve something like this.
Thanks in advance.

Did anyone knows the method to merge cells in C1Flexgrid for WPF not the usual DataGrid? I need to look my C1Flexgrid exactly like this,
Need to merge the cells and to give a back color to it. Please help me out.

You are posting a lot of questions here about a commercial third party control. When you purchased the control, you will also have purchased support for it - that would be the best place to start for getting expert help with the control. You might as well get your moneys worth.

*pre-emptive celebratory nipple tassle jiggle* - Sean Ewington

"Mind bleach! Send me mind bleach!" - Nagy Vilmos

My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility

Hello,

I am writing my app using MVVM pattern.

I have a XamDataGrid and i need to display in it my ViewModels.

I have a collection of VMs so each VM should be a row in the DataGrid.

Also each VM has a child VM that has collection of VMs. Each such VM contains 3 properties- Field, Value and operator.

I need the DataGrid to have dynamic fields according to the fields i have (in the collection of "small" VMs). each cell will contain the right value from the small VM under the right field .

The operator value should be displayed in another operator column. All operators are the same for the VMs related to same row in the DataGrid.

Currently i did it using dependency property- i bind the collection of VMs and than build a DataTable with dynamic columns and set is as DataSource of the dataGrid.

The thing is that it is fine if my DataGrid is read-only. But i need an option to change the DataGrid values . If i will do it with current code (with dependency property) i don't know what VM to change (because the DataGrid cell is not bind to any object).

How can i still solve this so it will work with binding?

Right,
But i don't know the number of fields i have.

hello, I've started using wpf and I want to display forms or WPF page in a main form WPF when I click on a button or from menu.

I use a window for my main form and a page displayed in a navigation frame for my controls.

Never underestimate the power of human stupidity
RAH

You can always take a look at the free WPF MDI at http://wpfmdi.codeplex.com/[^].

If you are fine with tabbed implementation, then Tabbed MDI in WPF[^] should be useful to you as well.

thank you very much, I already know the concept of mdicontainer but I thought this is not the same for implementation wpf thank you

Using C# only, and not WPF, is there a way to tie a TextBlock and TextBox together so that if I put them in a ListBox, they both scroll together? This is assuming you can put two controls in a ListBox, which you might not be able to do. If not, how can I do this. I have got working my scrolling List of TextBoxes, but I want to put a Label at the front of each TextBox. Either by a string or by a TextBlock.

But, I want to do this on the fly in C# and not use any WPF. If possible.

Not sure about the listbox control but I would assume it will take a data template which means you should use a template with a grid/stackpanel and a textblock bound to a description field and the other textblock/box bound to the value field in your list.

Don't give me any crap about not wanting to do it in xaml, if that is the case then go back to winforms where you are meant to manipulate the view.

Never underestimate the power of human stupidity
RAH

Mycroft Holmes wrote:

Don't give me any crap about not wanting to do it in xaml, if that is the case then go back to winforms

Well said!

I don't use Winforms. And, I have my reasons for not wanting to do it in XAML.

I know you don't use winforms but the question goes against all the design principles of WPF. I'd be interested in the reasons for not wanting to use xaml.

I have found one and that is building a grid based on a pivot but there you don't know the number of columns.

Never underestimate the power of human stupidity
RAH

I'm using a multilevel grid and I need to change the appearance of the grid on the fly based on a user selection. I probably could use WPF in some fashion, as I use it for other controls. But, on the fly would be better for my application. I'm under the impression that anything done in WPF can be done in straight C#.