A few MCML questions

A place for App developers to hang out / post
Post Reply
MrNorth

Posts: 60
Joined: Sat May 18, 2013 9:46 am
Location:

HTPC Specs: Show details

A few MCML questions

#1

Post by MrNorth » Sun Jan 12, 2014 4:06 pm

Hi!

My app is progressing nicely, but I am stuck on a few small UI issues, hopefully someone knows:

1) Gallery, focus border
I have this code for the button in the gallery

Code: Select all

<Panel Name="Background">        
        <Layout>
          <FlowLayout Orientation="Vertical" ItemAlignment="Near" />
        </Layout>
        <!--Margins="2,2,2,2"MinimumSize="[ButtonMinimumSize]"
        MaximumSize="[ButtonMaximumSize]"-->
        <Animations>
          <Animation Animation="animation://me:Focus"/>
          <Animation Animation="animation://me:NoFocus"/>
        </Animations>
        <Children>
          <Text Name="Label" Visible="false" />
          <Graphic  MaximumSize="300,300" Name="Image"  MaintainAspectRatio="true" />         
        </Children>
      </Panel>
It works great displaying a single picture, but whenever I want to add the other panel element with a fill image for the "focus" border it refuses to show. I tried by adding a panel with a colorfill element with some padding and then contained the above code in that, but then the button refuses to show... what is the quickest way to add a "focus" border to a gallery item? I have reviewed various samples but havent found anything that works good.

2) Gallery items Z order.
Is there a way to make the selected teim in a gallery on top of the other ones? Apparently when I render my gallery items, they are rendered with different z order, meaning when I scale one item when in focus, it gets on top of the following, but under the one behind. How can I make the selected item on top of everyone? SOmething like "topmostonfocus" or "makeontop" or "bringtofront" would do the trick, but can't find anything that works.

3) I have a scroller and a repeater for teh gallery, how can I tweak it so that the "cursor", the point where an item is selected, cant go any further right than the center? I have tried to set the "beginpaddingrelativeto" on the scrollerdata, but I can only select near and far, I want it like "center". Check the picture gallery in WMC for example.

4) In my gallery I load pictures with source as http, meaning every image displayes when loaded. This is a problem for the focus, because if I load the page and not all images have been loaded, I can't step nto the gallery, because no item is selected. I can only step "into" the gallery using the mouse. I can't access it with the arrow buttons. Next time when I enter the gallery, images are cached and the first item in gallery get focus and I can step on from there... but how to handle it when items are loading? One option I guess is to save the image in the data object, and load everything before I enter the gallery...

/H

MrNorth

Posts: 60
Joined: Sat May 18, 2013 9:46 am
Location:

HTPC Specs: Show details

#2

Post by MrNorth » Sun Jan 12, 2014 6:57 pm

Hi!

I have solved the problem with the focus border, sort of.
Here is the code that almost works:

Code: Select all

    <Panel Name="GalleryPanel" Layout="Form">
            <LayoutInput>
              <FormLayoutInput Left="Parent,0.05"
                               Top="Parent,.25"
                               Right="Parent,0.95"
                               Bottom="Parent,.75"/>
            </LayoutInput>
            <Children>
              <Panel Name="ButtonFocusContainer" Layout="Form" >
                <Layout>
                  <AnchorLayout SizeToHorizontalChildren="true" SizeToVerticalChildren="true"/>
                </Layout>
                <LayoutInput>
                  <FormLayoutInput Top="Focus,0,-15" Left="Focus,0,-19" Right="Focus,1,22" Bottom="Focus,1,14"/>
                </LayoutInput>
                <Children>
                  <Graphic Content="[ItemFocus]" >                    
                  </Graphic>                  
                </Children>
                <Animations>
                  <Animation Type="Move">
                    <Keyframes>
                      <PositionKeyframe Time="0" RelativeTo="Current" Interpolation="Exp"/>
                      <PositionKeyframe Time="0.2" RelativeTo="Final"/>
                    </Keyframes>
                  </Animation>
                </Animations>
              </Panel>
              <Scroller Orientation="Horizontal"
                        FadeSize="-30"
                        ScrollingData="[ScrollingData]">
                <Children>

                  <Repeater Name="ListRepeater"
                            Source="[Shows]">
                    <Layout>
                      <GridLayout Orientation="Vertical"
                                  AllowWrap="true"
                                  Spacing="0,0" Repeat="Always" RepeatGap="200"
                                  />
                    </Layout>
                    <Content>                      
                      <me:ShowButton Show="[RepeatedItem!a:FullShow]"
                                     Application="[Application]"
                                     Index="[RepeatedItemIndex]"
                                     SelectedIndexHolder="[SelectedIndexHolder]"
                                     SelectedItemHolder="[SelectedItem]"></me:ShowButton>
                    </Content>
                    <Animations>
                      <Animation Type="Move">
                        <Keyframes>
                          <PositionKeyframe Time="0" Value="0,0,0" RelativeTo="Current"/>
                          <PositionKeyframe Time=".25" Value="1,1,1" RelativeTo="Final" Interpolation="SCurve"/>
                        </Keyframes>
                      </Animation>
                    </Animations>
                  </Repeater>
                </Children>
              </Scroller>
            </Children>
          </Panel>
The problem is that the border image is not scaled to the gallery item. I have to apply a manual scale, and that is not the most exact thing. Is there any way to make it resize to exactly the size of the gallery item? As it is not, it is exactly the size of the image.

I have also figured out the center lock scroll position, it was a matter of fiddling with the padding of the scroller. Works okay now.

Would really appreciate some assistance with the rest, aspecially why the gallery items when focused (scaled) are on top of their sibling gallery items.


And, does anyone know of a decent border image? The one I use now is from ehres.dll and it is the epg border, it is way to thick, but it was the best I could find... I wonder where the border/background used for all gallery items in WMC is.


/H

DanB_DE

Posts: 21
Joined: Sun Jul 31, 2011 8:58 am
Location:

HTPC Specs: Show details

#3

Post by DanB_DE » Sun Jan 12, 2014 8:06 pm

2) Gallery items Z order

You have to use the following line in the Rules section for the Item that gets repeated. (in your example Code it would be in this Object: <me:ShowButton

<!--Impotant without this the Item with focus has wrong Z Order | DanB-->
<Default Target="[Input.MakeTopmostOnFocus]" Value="true" />

Please let me know if this helps.

DanB
#

MrNorth

Posts: 60
Joined: Sat May 18, 2013 9:46 am
Location:

HTPC Specs: Show details

#4

Post by MrNorth » Mon Jan 27, 2014 3:16 pm

DanB_DE wrote:2) Gallery items Z order

You have to use the following line in the Rules section for the Item that gets repeated. (in your example Code it would be in this Object: <me:ShowButton

<!--Impotant without this the Item with focus has wrong Z Order | DanB-->
<Default Target="[Input.MakeTopmostOnFocus]" Value="true" />

Please let me know if this helps.

DanB
#
Hi!

Sorry to say, it didn't do anything. I have spent several hours trying to figure out why the selected item doesn't get focus, and I am out of options, and hope. This is what makes mcml so incredibly annoying to work with, the most simple stuff that refuses to work for no apparent reason.

Any way I can troubleshoot why the selected item using the above code doesn't get on top of the other items in the repeater? Without that working, I can't release this app, it looks so stupid now...

I am getting desperate...

Here is the code for the galleryitem

Code: Select all

<Mcml xmlns="http://schemas.microsoft.com/2008/mcml"
      xmlns:cor="assembly://MScorLib/System"
      xmlns:styles="resx://MediaCenterApplication4/MediaCenterApplication4.Resources/Styles"
      xmlns:me="Me"
       xmlns:a="assembly://MediaCenterApplication4/MediaCenterApplication4">


  <UI Name="ShowButton">
    <Properties>
      <Image Name="Penguin" Source="file://C:\temp\Penguins.jpg" NineGrid="7,7,7,7"/>
      <Index Name="Index" Index="$Required" />
      <a:IntHolder Name="SelectedIndexHolder" IntHolder="$Required" />
      <a:SelectedItemHolder Name="SelectedItemHolder" SelectedItemHolder="$Required" />
      <a:ISelectableItem Name="SelectedShow" ISelectableItem="$Required" />
      
      <ICommand Name="Command"
                ICommand="$Required" />
      <cor:String Name="ButtonLabel"
                  String="Test" />
      <cor:String Name="ButtonImage" cor:String="$Required" />
      <Color Name="LabelFocusedColor"
             Color="White" />
      <Color Name="LabelPressedColor"
             Color="Green" />
      <Font Name="LabelFont"
            Font="font://styles:Text" />
      <!--<Size Name="ButtonMinimumSize"
            Size="300,30"/>
      <Size Name="ButtonMaximumSize"
            Size="300,30"/>-->
    </Properties>

    <Locals>
      <ClickHandler Name="Clicker"/>
    </Locals>

    <Rules>
      <Default Target="[Input.MakeTopmostOnFocus]" Value="true" />      
      <!--<Binding Source="[ButtonImage!Image]"
               Target="[Image.Content]"/>-->
      
      <Binding Source="[ButtonLabel]"
                    Target="[Label.Content]"/>
      

      <Binding Source="[Command]"
               Target="[Clicker.Command]"/>
      <!--<Condition Source="[Clicker.Clicking]"
                 SourceValue="true">
        <Actions>
          <Set Target="[Label.Color]"
               Value="[LabelPressedColor]"/>
        </Actions>
      </Condition>-->
      <Condition Source="[Input.KeyFocus]"
                 SourceValue="false">
        <Actions>
          <Set Target="[Label.Alpha]"
               Value="0.5" />
        </Actions>
      </Condition>
      <Condition Source="[Input.KeyFocus]"
                 SourceValue="true">
        <Actions>
          <Set Target="[SelectedIndexHolder.Value]" Value="[Index.Value]" />
          <Set Value="[Label.Content]" Target="[SelectedItemHolder.Description]"/>
          <Set Value="[SelectedShow!a:ISelectableItem]" Target="[SelectedItemHolder.Item]"/>
          
          
          <!--<Set Target="[Label.Color]"
               Value="[LabelFocusedColor]"/>-->
          <Set Target="[Label.Alpha]"
               Value="1.0" />
        </Actions>
      </Condition>
     
    </Rules>

    <Content>
      <Panel Name="Background">
        
        <Layout>
          <FlowLayout Orientation="Vertical" ItemAlignment="Near" />
        </Layout>
        <!--Margins="2,2,2,2"MinimumSize="[ButtonMinimumSize]"
        MaximumSize="[ButtonMaximumSize]"-->
        <Animations>
          <Animation Animation="animation://me:Focus"/>
          <Animation Animation="animation://me:NoFocus"/>
        </Animations>
        <Children>
        
          <Text Name="Label" Visible="false" />
         
          <Graphic Content="[Penguin]"  MaximumSize="300,300" Name="Image"  />         
        </Children>
      </Panel>
    </Content>

  </UI>

  <Animation Name="Focus"
             Loop="0"
             CenterPointPercent="0.5,0.5,0"
             Type="GainFocus">
    <Keyframes>
      <ScaleKeyframe Time="0.0"
                     Value="1,1,1"
                     RelativeTo="Current"
                     Interpolation="Linear"/>
      <ScaleKeyframe Time="0.1"
                     Value="1.1,1.1,1"
                     RelativeTo="Current"
                     Interpolation="Linear"/>
    </Keyframes>
  </Animation>

  <Animation Name="NoFocus"
             Loop="0"
             CenterPointPercent="0.5,0.5,0"
             Type="LoseFocus">
    <Keyframes>
      <ScaleKeyframe Time="0.0"
                     RelativeTo="Current"
                     Interpolation="Linear"/>
      <ScaleKeyframe Time="0.04"
                     Value="1,1,1"/>
    </Keyframes>
  </Animation>

</Mcml>

/H

DanB_DE

Posts: 21
Joined: Sun Jul 31, 2011 8:58 am
Location:

HTPC Specs: Show details

#5

Post by DanB_DE » Tue Jan 28, 2014 6:48 pm

Hi,

if you send me a small pure MCML sample with the problem i will fix it.

DanB
#

MrNorth

Posts: 60
Joined: Sat May 18, 2013 9:46 am
Location:

HTPC Specs: Show details

#6

Post by MrNorth » Wed Jan 29, 2014 3:08 pm

DanB_DE wrote:Hi,

if you send me a small pure MCML sample with the problem i will fix it.

DanB
#
Hi!

I managed to fix it just now. The problem was that the actual repeateditem (gallery item) was built of two nested UI objects. When I merged them into a single UI, this worked. Strange, but that is the logic of MCML :)

/H

Post Reply