Question

该控件将在左上方和右下方显示其名称和价格的设计。我正在从Windows窗体重新编码程序，并在那里创建了一个自定义控件。我只是想在WPF和它的挣扎总线中重现它该控件可用于atm，但不适用于第一个图像以进行大小调整或我拉起的图片与前一张图片的尺寸不同。

问题在于，直到装入事件之后，代码才具有正确的大小。

“因此，我想知道的主要问题是如何获取大小，然后触发第二个事件来更新叠加层。”

控制结果的图像：

！ https://imgur.com/a/ubwjjbT

问题图像第二个负载的不同宽高比：

！ https://imgur.com/wDukGSp

再次加载第二张图片可解决尺寸调整问题：

！ https://imgur.com/JOUxv55

此外，我一直在尝试将这种控件转变为可重用控件，以了解在WPF中的系统将受到极大赞赏的任何建议/建议，从何处着手

下面的代码是我要获取所需基本布局的工作。我仍然需要更好地设置主题，但总体布局是正确的。我尝试过使用画布，但无法获得正确的布局

就我所知，这可能是完全错误的，因此，如果他们的更好的方法，请声明。我不想迷失方向。

Xaml 修复了Sizechanged事件，可在加载源后进行更新。

 <Image x:Name="pbMainImage"  Source="{Binding Path=(local:SV.PbMainImage), Converter={StaticResource ImageConverter},
                        Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="center" SizeChanged="name_price_sizingbclick"/>

<Button Name="pbbutton" Style="{StaticResource ImageButtonStyle}" Grid.ColumnSpan="6"  Click="pbmain_Click" SizeChanged="name_price_sizingbclick">

    <Border Name="Test" Grid.Row="0"   Margin="{Binding Path=(local:SV.pading)}" Background="#252525">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{Binding Path=(local:SV.Imagespacing)}"/>
                <ColumnDefinition Width=".2*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width=".2*"/>
                <ColumnDefinition Width="{Binding Path=(local:SV.Imagespacing)}"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height=".15*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height=".15*"/>
            </Grid.RowDefinitions>

            <local:ZoomBorder x:Name="border" Grid.ColumnSpan="5" Grid.RowSpan="3" ClipToBounds="True" >
                <Image x:Name="pbMainImage"  Source="{Binding Path=(local:SV.PbMainImage), Converter={StaticResource ImageConverter},
Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="center"/>
            </local:ZoomBorder>

            <TextBlock Grid.Column="1" Background="Orange" Opacity=".8"  FontWeight="Bold" Padding="10 0 10 0" TextAlignment="Center" >
    <Viewbox>
        <TextBlock Text="{Binding Path=(local:SV.ActiveDesign)}" TextAlignment="Center"/>
    </Viewbox>
</TextBlock>

            <TextBlock Grid.Column="3"  Grid.Row="3" Background="GreenYellow" Opacity=".8" FontWeight="Bold" Padding="10 0 10 0" TextAlignment="Center"  >
    <Viewbox>
        <TextBlock  Text="{Binding Path=(local:SV.sprice),StringFormat=${0}}" TextAlignment="Center" />
    </Viewbox>
</TextBlock>

            <Grid Grid.Row="3" Grid.Column="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Button Panel.ZIndex="2" Grid.Row="1" Style="{StaticResource RoundCorner}" Content="4" Click="prevImg" Visibility="Hidden"/>
            </Grid>
            <Grid Grid.Row="3" Grid.Column="3">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Button Panel.ZIndex="2" Grid.Row="1" Style="{StaticResource RoundCorner}" Content="4" Click="nextvImg" Visibility="Hidden" />
            </Grid>

        </Grid>
    </Border>
</Button>

C＃

//this is what moves the overlays around. on source change it runs when source is changed
public static void name_price_sizing(object sender, EventArgs e)
{
    MainWindow myWindow = Application.Current.MainWindow as MainWindow;
    Button p = myWindow.pbbutton;
    Image i = myWindow.pbMainImage;
    if (toggle == 0)
    {
        SV.Imagespacing = Math.Round(((p.ActualWidth - i.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2 - 14;
    }
    else { SV.Imagespacing = Math.Round(((p.ActualWidth - i.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2; }
    if (SV.Imagespacing < 0) { SV.Imagespacing = 0; }
}
//this is what moves the overlays around. on control click to resize for fullscreen
public void name_price_sizingbClick(object sender, EventArgs e)
{

    //  StaticVariables.Imagespacing = (pbbutton.ActualWidth - pbMainImage.ActualWidth) / 2;
    if (toggle == 0) { SV.Imagespacing = Math.Round(((pbbutton.ActualWidth - pbMainImage.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2 - 14; } else { SV.Imagespacing = Math.Round(((pbbutton.ActualWidth - pbMainImage.ActualWidth) / 2) / 2, MidpointRounding.AwayFromZero) * 2; }
    if (SV.Imagespacing < 0) { SV.Imagespacing = 0; }

}

Answer 1

我已经解决了我的问题，不确定如何将其标记为已解决。我在图像控制中添加了SizeChanged="name_price_sizingbclick"，它解决了尺寸调整问题。我仍然希望查看代码中的技巧，以及如何使该控件成为可重用的用户控件的帮助。

操作员本人回答了该问题，但未将其写为答案，因此将其删除。

控件的大小具有最后一项的大小

1 个答案: