لماذا لا يمكنني ضبط العتامة في هذا الموقف؟

Question

إليك الموقف ... في المستوى الأعلى ، لديّ tabcontrol. تتكون كل صفحة في TabControl من صندوق القائمة:

<TabControl>
    <TabItem Header="item 1">
        <ListBox>
            <ListBoxItem>sub item 1</ListBoxItem>
            <ListBoxItem>sub item 2</ListBoxItem>
            <ListBoxItem>sub item 3</ListBoxItem>
        </ListBox>
    </TabItem>
    <TabItem Header="item 2">
        <ListBox>
            <ListBoxItem>sub item 1</ListBoxItem>
            <ListBoxItem>sub item 2</ListBoxItem>
        </ListBox>
    </TabItem>
</TabControl>

تحتوي قائم على stackpanel ذات المنحى أفقيًا كـ ListTemplate:

<Style TargetType="ListBox">
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"
                      VisibleChanged="onStackPanelVisibilityChange"
                      Loaded="onStackPanelLoaded"
                      VerticalAlignment="Center" HorizontalAlignment="Center" />
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
</Style>

ستلاحظ أن لدي بعض معالجات الأحداث على لوحة المكدس هذه. هذه هي تحريك العناصر داخل لوحة المكدس ، لذلك تتلاشى في العرض بالتتابع. يتم تنفيذ معالجات الأحداث على النحو التالي:

void onStackPanelLoaded(object sender, RoutedEventArgs e)
{
    StackPanel panel = sender as StackPanel;

    applySubItemAnimations(panel);
}

void onStackPanelVisibilityChange(object sender, DependencyPropertyChangedEventArgs e)
{
    StackPanel panel = sender as StackPanel;

    if (panel.IsVisible)
    {
        applySubItemAnimations(panel);
    }
}

private void applySubItemAnimations(StackPanel panel)
{
    DoubleAnimation fadeIn = new DoubleAnimation();
    fadeIn.DecelerationRatio = 0.1;
    fadeIn.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 500));
    fadeIn.From = 0.0;
    fadeIn.To = 1.0;

    for (int i = 0; i < panel.Children.Count; i++)
    {
        panel.Children[i].Opacity = 0.0;
        fadeIn.BeginTime = new TimeSpan(0, 0, 0, 0, 200 * i + 50);
        panel.Children[i].BeginAnimation(UIElement.OpacityProperty, fadeIn);
    }
}

بالنسبة للجزء الأكبر ، هذا يعمل بشكل رائع. عند النقر فوق (أو تحميل) علامة تبويب ، تتلاشى العناصر الفرعية في لوحة المكدس في عرض واحد آخر. المشكلة هي عندما تنقر على عودة إلى علامة تبويب تم عرضها بالفعل من قبل (أي ، أنت في معالج الأحداث "VisibleChanged" بدلاً من معالج "تحميل") ، يتم عرض جميع العناصر بالفعل وهي رمش بالترتيب ، بدلاً من البدء كخفي ووجود يظهر مرتب.

إليك المكان الذي يصبح فيه قبيحًا. هذا الخط:

panel.Children[i].Opacity = 0.0;

... لا يفعل شيئا. إذا تقدمت عبر الكود في مصحح الأخطاء ووضعت مشاهدة على "panel.children [i] .ositive" ، فهو يبقى عند 1.0. لا استثناء أو أي شيء. انها فقط ... لا تعمل.

أيه أفكار؟

Answer 1

لدي تخمين حول ما قد يحدث: لا يزيل WPF الرسوم المتحركة بمجرد اكتمالها ، لذلك عندما يتم تشغيل الكود الخاص بك عبر applySubItemsAnimations طريقة للمرة الثانية ، لا تزال الرسوم المتحركة السابقة موجودة. لذلك يمكنك محاولة إزالة هذه الرسوم المتحركة عن طريق المرور لا شيء كمعلمة ثانية إلى

panel.Children[i].BeginAnimation(UIElement.OpacityProperty, null);

بعد ذلك ، يمكنك تطبيق الرسوم المتحركة الجديدة ، لذلك الكل for-سيبدو حلقة هكذا:

for (int i = 0; i < panel.Children.Count; i++)
{            
    panel.Children[i].Opacity = 0.0;            
    fadeIn.BeginTime = new TimeSpan(0, 0, 0, 0, 200 * i + 50);            
    panel.Children[i].BeginAnimation(UIElement.OpacityProperty, null);        
    panel.Children[i].BeginAnimation(UIElement.OpacityProperty, fadeIn);        
}